element-ui之tree组件使用心得

element-ui tree 文档入口

1 上下拖拽

1.1 属性

1.2 事件

1.3 业务实现

需求：同等level 可以进行拖拽移动 不允许被拖至低于被拖拽元素level等级里

<el-tree
  :data="treeList"
  :props="props"
  :allow-drop="allowDrop"
  node-key="id"
  draggable
  ref="tree"
  @node-drop="handleDrop"
></el-tree>

data() {
    return {
        treeList: [],
        props: {
        label: "name",
        children: "children",
        isLeaf: "leaf",
      },
    }
},
methods: {
  /**
   * 需求：同等level 可以进行拖拽移动 不允许被拖至低于被拖拽元素level等级里
   *（即：一级与一级可以实现上下移动，二级节点可以被拖拽至其他一级下，但是一级不能拖至二级下成为子节点）
   * 拖拽时判定目标节点能否被放置
   * 参数依次是：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
   *
   * type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
   */
  allowDrop(draggingNode, dropNode, type) {
    if (draggingNode.level == dropNode.level) {
      // 如果level相同 允许追加到目标节点前后 不允许追加到目标节点里
      return type != "inner";
    } else if (draggingNode.level > dropNode.level) {
      // 子节点 level的值较大
      // 如果节点level从低拖到高（比如2级节点拖到1级） 仅允许追加目标节点里面(成为目标节点的子节点)
      return type == "inner";
    }
  }, 
  // 拖拽成功完成时触发的事件 参数：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event
    handleDrop(draggingNode, dropNode, dropType, event) {
        const {
        level,
        data: { id },
      } = draggingNode;
      // 拖拽成功后更新接口数据
    }
}

2 新增与删除

2.1 追加在一级节点

// 第二个参数key可以写0
this.$refs.tree.append(data, 0);

2.2 操作节点名称/追加至二级节点等

对于二级节点追加 或者节点名称修改，使用updateKeyChildren方法无法更新，只能通过重新更新整棵树的数据更新：

// data 为接口返回的所有的数据
this.treeList = data

2.3 删除节点

this.$refs.tree.remove(node);

2.4 插入节点

this.$refs.tree.remove(node.data.id);
if (action == -1) {
// 上移
this.$refs.tree.insertBefore(tree[nodeIndex], tree[nodeIndex - 1]);
} else {
// 下移
this.$refs.tree.insertAfter(tree[nodeIndex], tree[nodeIndex + 1]);
}

2.5 获取某个节点

// 此id是节点的唯一值
const node = this.$refs.tree.getNode(id);

3 勾选与反选

<el-tree
  :props="props"
  :data="tree"
  :load="loadNode"
  :default-expanded-keys="expandedKeys"
  lazy
  ref="tree"
  node-key="id"
  show-checkbox
  check-strictly
  @check-change="handleCheckChange"
>
</el-tree>

3.1 默认首先与展开的数据

从接口获取的默认勾选的数据，需要通过遍历调用setChecked才能生效

data() {
return {
      props: {
        label: "name",
        children: "children",
        isLeaf: "leaf",
      },
      tree: [],
      selectData: [], // 选择项目
      expandedKeys: [], // 展开的keys
    };
},
methods:{
    async loadNode(node, resolve) {
      // 通过接口获取默认展开的数据
        const data = await axios(...)
        // 默认需要展开的node
        this.expandedKeys = data.length ? [data[0].id] : [];
        //  this.selectData 就是默认需要勾选的数据 id是唯一值
        const checkedIds = this.selectData.filter((item) => item.id);
        // 处理初次加载时 默认勾选选中项
        checkedIds.forEach((item) => {
          this.$refs.tree.setChecked(item, true, false);
        });
        resolve([]);// 此次返回接口数据
    },  
}

3.2 勾选与反选

勾选与反选主要是操作check-change事件：

// 选中
handleCheckChange(data, checked, indeterminate) {
  let index = this.selectData.findIndex((item) => item.id == data.id);
  if (index == -1 && checked) {
    // 取消筛选
    this.selectData.push(data);
    return;
  }
  if (index > -1 && !checked) {
    // 取消筛选
    this.selectData.splice(index, 1);
  }
},

3.3 勾选父级，子级不勾选

:check-strictly="true"

3.4 清空选中的节点

this.$refs.tree.setCheckedKeys([]);