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、完整代码

<template>
  <div class="hello">
    <h1>el-tree基本功能</h1>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
      :default-checked-keys="[1]"
      default-expand-all
      :props="defaultProps"
      check-strictly
    ></el-tree>
    <div class="btn">
      <el-button size="mini" type="primary" @click="getChecked">获取选中</el-button>
      <el-button size="mini" type="primary" @click="setChecked">设置选中</el-button>
      <el-button size="mini" type="primary" @click="selectAllNodes">全选</el-button>
      <el-button size="mini" type="primary" @click="clearAllNodes">清空</el-button>
      <el-button size="mini" type="warning" @click="handleSelectAll">全选/清空</el-button>
      <el-select size="mini" v-model="value" @change="selectChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      defaultProps: {
        children: "childList",
        label: "label"
      },
      treeData: [
        {
          id: 1,
          label: "一级 1",
          childList: [
            {
              id: 4,
              label: "二级 1-1",
              childList: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          childList: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          childList: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      options: [
        {
          value: "1",
          label: "展开所有"
        },
        {
          value: "2",
          label: "收合所有"
        }
      ],
      value: "展开所有",
      checkAll: false
    };
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data);
      this.$refs.tree.getCheckedKeys();
    },
    handleCheckChange(data, checked, indeterminate) {
      // console.log(data, checked, indeterminate);
    },
    //获取选中
    getChecked() {
      // 1.通过node获取
      console.log("通过node获取", this.$refs.tree.getCheckedNodes());
      // 2.通过key获取
      console.log("通过key获取", this.$refs.tree.getCheckedKeys());
    },
    // 设置选中
    setChecked() {
      // 1.通过node设置
      this.$refs.tree.setCheckedNodes([
        { id: 2, label: "一级 2" },
        {
          id: 7,
          label: "二级 3-1"
        }
      ]);
      // 2.通过key设置
      // this.$refs.tree.setCheckedKeys([5, 8]);
    },
    // 全选
    selectAllNodes: function() {
      //  获取根节点
      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]);
          }
        }
      }
    },
    // 清空
    clearAllNodes: function() {
      this.$refs.tree.setCheckedKeys([]);
    },
    // 全选/清空
    //当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点
    handleSelectAll() {
      if (this.checkAll == false) {
        this.$refs.tree.setCheckedNodes(this.treeData);
        // this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
        this.checkAll = true;
      } else {
        // this.$refs.tree.setCheckedNodes([]);
        this.$refs.tree.setCheckedKeys([]);
        this.checkAll = false;
      }
    },
    // 展开收合
    selectChange(value) {
      if (value == 1) {
        // 展开所有
        for (let i = 0; i < this.treeData.length; i++) {
          this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true;
        }
      } else if (value == 2) {
        // 收合所有
        for (let i = 0; i < this.treeData.length; i++) {
          this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = false;
        }
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 600px;
  border: 1px solid rgb(209, 203, 203);
  border-radius: 6px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
.btn {
  margin-top: 20px;
}
.el-select {
  margin-left: 10px;
  width: 120px;
}
</style>

参考：element el-tree