element ui中的树形组件el-tree的全部选中和展开

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

zxx的Opera

于 2020-08-01 10:44:44 发布

887
 收藏 6
版权
目录

一、功能实现

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

三、基础功能

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

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

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

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

 

 

二、结构构成（两个复选框+树形结构）
三、基础功能
<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;

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

 

 

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

<el-tree

                  :data="data"

                  show-checkbox

                  node-key="ID"

                  ref="tree"

                  highlight-current

                  :props="defaultProps"

                  @check="(click, checked)=>{handleCheckChange(click, checked)}"

                  :check-strictly="false"

></el-tree>

 可自动修改：值

  defaultProps: {

        children: "Child",

        label: "Name",   

    },

五、如何将选择的所有节点一起提交
for (
            var i = 0;
            i <
            this.$refs.tree
              .getCheckedKeys()
              .concat(this.$refs.tree.getHalfCheckedKeys()).length;
            i++
 ) {
            this.roleList =
              this.roleList +
              this.$refs.tree
                .getCheckedKeys()
                .concat(this.$refs.tree.getHalfCheckedKeys())[i] +
              ",";
   }

 重点：获取全选和半选的所有key值

this.$refs.tree .getCheckedKeys()
this.$refs.tree.getHalfCheckedKeys()

六、从后台拿到数据如何回填=>树形结构要对应全选中和半选中状态
如一个节点是“父亲”-还有-“儿子”-还有-“孙子”那么儿子是父亲的子节点，孙子是儿子的子节点，是父亲的叶子节点

描述：后台给我的是一个节点的数组，包括父节点和子节点的和，如何实现若父节点下的子节点未全部选中，父节点处于半选择状态。

 

 

arr2.forEach((i) => {
          var node = this.$refs.tree.getNode(i);
          if (node.isLeaf) {
            this.$refs.tree.setChecked(node, true);
          } 
});
解决：拿到数组的每一个节点，判断其所有的叶子节点是否为true,为则设置this.$refs.tree.setChecked(node, true);

否则就处于半选择状态

 

七、若后台返回的是所有的树形节点，如何使全选框选中
解决：判断从后台拿到的所有树形结构的ID所形成的数组的长度是否与当前编辑状态的数组长度相同

 // 所有权限接口
    getAllRuleList() {
      getRuleList().then((res) => {
        console.log(res.Data);
        this.digui(res.Data);
        this.data = res.Data;
      });
    },
    // 递归函数
    digui(list) {
      list.map((item) => {
        console.log(item.ID);
        if (item.Child) {
          this.digui(item.Child);
        }
        this.ARR.push(item.ID);
      });
    },

这样一直递归里面的，就能拿到所有的ID所形成的数组

总结：

element ui中树形tree的使用：

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

展开时设置节点：this.$refs.tree.store.nodesMap[i].expanded = true;

 this.$refs.tree.setChecked(node, true);

 this.$refs.tree.getNode(i);

区别如下：setChecked和setCheckedNodes

 

 

————————————————
版权声明：本文为CSDN博主「zxx的Opera」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Kungirl/article/details/107727243