element ui中的树形的全部选中和展开

目录

一、功能实现

二、结构构成（两个复选框+树形结构）

三、基础功能

四、后台给我的树形节点对应的键名不对应=>解决办法

五、如何将选择的所有节点一起提交

六、从后台拿到数据如何回填=>树形结构要对应全选中和半选中状态

七、若后台返回的是所有的树形节点，如何使全选框选中

---

二、结构构成（两个复选框+树形结构）

三、基础功能

<div class="title">
       <el-checkbox v-model="checked1" @change="chooseAll">选中全部</el-checkbox>
       <el-checkbox v-model="checked2" @change="expandAll">展开全部</el-checkbox>
 </div>

1、选中全部

 // 全部选中
    chooseAll() {
      this.roleList = "";
      // 判断按钮的状态
      if (this.checked1) {
        // 设置
        this.$refs.tree.setCheckedNodes(this.data);
        for (var i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) {
          this.roleList += this.$refs.tree.getCheckedNodes()[i].ID + ",";
        }
        this.roleList = this.roleList.slice(0, this.roleList.length - 1);
      } else {
        this.$refs.tree.setCheckedNodes([]);
        this.roleList = "";
      }
    },
// 全部展开
    expandAll() {
      if (this.checked2) {
        for (var i in this.$refs.tree.store.nodesMap) {
          this.$refs.tree.store.nodesMap[i].expanded = true;
        }
      } else {
        for (var j in this.$refs.tree.store.nodesMap) {
          this.$refs.tree.store.nodesMap[j].expanded = false;
        }
      }
    },

重点：

选中时设置节点：this.$refs.tree.setCheckedNodes(this.data);

展开时设置节点：

this.$refs.tree.store.nodesMap[i].expanded = true;