vue---element el-tree全选、清空、展开、收缩等基本功能总结

目录

el-tree

1、获取选中

2、设置选中

3、全选、清空

4、展开收缩

5、完整代码

---

 

el-tree

用来展示树型结构的信息，具备展开和折叠的功能。通过案例介绍相关知识点内容，案例实现的功能如下：

1、获取选中

可通过node和key(el-tree中需设置node-key，一般为id)获取选中的节点

设置默认选中id=1的节点

 

getCheckedNodes

若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组

(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false

getCheckedKeys

若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组

(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false

 // 1.通过node获取
console.log("通过node获取", this.$refs.tree.getCheckedNodes());
 // 2.通过key获取
 console.log("通过key获取", this.$refs.tree.getCheckedKeys());

2、设置选中

可通过node和key(el-tree中需设置node-key，一般为id)设置选中的节点。

setCheckedNodes

设置目前勾选的节点，使用此方法必须设置 node-key 属性

(nodes) 接收勾选节点数据的数组

 this.$refs.tree.setCheckedNodes([
        { id: 2, label: "一级 2" },
        {
          id: 7,
          label: "二级 3-1"
        }
      ]);

setCheckedKeys

通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性

(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false

this.$refs.tree.setCheckedKeys([5, 8]);

3、全选、清空

①遍历所有的节点，并设置其checked属性为true或false

//  获取根节点
      let rootNode = this.$refs.tree.getNode(this.treeData[0].id).parent;
      travelNodes(rootNode);
      function travelNodes(tmpRoot) {
        // 选中该节点
        tmpRoot.checked = true;
        // 叶子节点
        if (tmpRoot.childNodes.length === 0) {
          return;
        }
        // 不是叶子节点,递归遍历
        else {
          let tmpChildNoes = tmpRoot.childNodes;
          for (let i = 0; i < tmpChildNoes.length; i++) {
            travelNodes(tmpChildNoes[i]);
          }
        }
      }

②通过设置node或key

 注意：当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点；通过key方法需要遍历获得key。

 //全选
this.$refs.tree.setCheckedNodes(this.treeData);
 // this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

//清空
 // this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setCheckedKeys([]);

4、展开收缩

遍历所有的节点，并设置其expanded属性为true或false

 for (let i = 0; i < this.treeData.length; i++) {
          this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true;
        }

5、完整代码

参考：element el-tree