element-ui 多级树形控件的实现

1、树形控件的上方我做了一个联动的按钮，控制树形控件整体的展开折叠、父子联动、全选或全不选

​
 <el-checkbox
    label="展开/折叠"
    v-model="roleChange"
    @change="handleChange"
  ></el-checkbox>
  <el-checkbox
     label="全选/全不选"
     v-model="roleCheck"
     @change="handleChecked"
    ></el-checkbox>
    <el-checkbox
      label="父子联动"
      v-model="roleBind"
       @change="changeFather"
     ></el-checkbox>

​

 对应的事件代码

// 新增角色对话框中的全选和全不选操作
    handleChecked() {
      // this.roleCheck = !this.roleCheck;
      // console.log(this.roleCheck);
      if (this.roleCheck) {
        this.$refs.tree.setCheckedKeys([1]);
      } else {
        this.$refs.tree.setCheckedKeys([0]);
      }
    },
    // 实现折叠和展开的操作
    handleChange() {
      // this.roleChange = !this.roleChange;
      // console.log(this.roleChange);
      if (this.roleChange) {
        this.$refs.tree.store.nodesMap[1].expanded = true;
      } else {
        this.$refs.tree.store.nodesMap[1].expanded = false;
      }
    },
    // 父子联动
    changeFather(e) {
      if (e) {
        this.menuCheckStrictly = true;
      } else {
        this.menuCheckStrictly = false;
      }
    },

2、树形控件

 <div class="treeBox">
                <el-tree
                  ref="tree"
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :props="defaultProps"
                  :check-strictly="!menuCheckStrictly"
                  @check-change="handleCheckChange2"
                  :default-expanded-keys="treeData"
                  :default-checked-keys="orderKeys"
                  :visible.sync="treeVisible"
                >
                </el-tree>
              </div>

ref相当于id是很重要的一点 node-key="id"是每一个选项的特定id这个要写才能有后面的那些操作

check-strictly：表示在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。这里一开始取反就是不关联 ，刚好上面做的就是有父子关联的按钮可以根据这个按钮改变到底关不关联

:default-expanded-keys="treeData" | 默认展开的节点

:default-checked-keys="orderKeys" | 选中的节点

相关事件函数代码：

下面这个就是核心代码了，你选中的那些节点保存下来

// 把选择的菜单权限赋值给this.glry，然后进行传参
    handleCheckChange2(data, checked, indeterminate) {
      //这一步狠狠狠重要，把选中的数组赋值
      let nodess = JSON.stringify(this.$refs.tree.getCheckedNodes());
      // console.log('nodess', nodess, typeof nodess);
      this.glry = [];
      for (const iterator of JSON.parse(nodess)) {
        this.glry.push(iterator.id);
      }
    }

3、提交按钮需要做什么

这个控件操作完毕要按确定，那么一些逻辑就应该写在这里，根据接口要求传参获取数据，然后做一些改变啥的，这里就不具体说因为项目不同差别也大

 // 当表单提交之后，把之前选中的选项清空，把树形控件折叠起来，就是调用上面按钮的功能
      this.$refs.tree.setCheckedKeys([0]);
      this.$refs.tree.store.nodesMap[1].expanded = false;

4、还有一个要求就是当你点击修改的时候，你上次操作在这个角色身上的选择的节点在点开的时候也要是和上次有着相同的选择

这里的this.orderKeys就是你点击的时候传递角色的id然后获取它的详情数据，把它有的选择节点进行保存

// 树形结构控件按返回的数值进行选项的默认勾选;
        this.$refs.tree.setCheckedKeys(this.orderKeys);

大致是这样的具体也可以进行其他文章的百度进行参考结合