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