element-UI tree 分級載入節點：load事件

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>

其中load方法事件中遇到情況如下：每個人應用場景不同，根據實際情況進行調整。

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name', // 該名稱為樹節點顯示的名稱
          children: 'zones' 
        },
        count: 1，
        tabledata:[]，
        treenodeone:'',//第一個節點的值。
      };
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      handleNodeClick(data) {
        //在此方法請求之前會執行loadNode方法
        data即為節點資料node
        if(data.level == 1)this.treenodeone = node;//將第一層節點進行記錄，假設第五層節點還想用第一層節點資料，可將節點值用此方法全域性化。
        console.log(data);
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);//當前為兩個根節點  name變數必須與宣告中的props的lable設定的內容一致
        }
        if (node.level > 3) return resolve([]);//resolve為當前節點賦值，追加在當前節點下
        ///假設進行當前介面的資料值過來，假設有個搜尋條件為searchuser
        if(node.level == 2)//level為當前節點點選的層級
        {
           this.tabledata = this.tabledata.filter(t=>t.name = searchuser);//將現有資料針對搜尋條件進行過濾。
        }
        ///
        var hasChild;
        if (node.data.name === 'region1') {
          hasChild = true;
        } else if (node.data.name === 'region2') {
          hasChild = false;
        } else {
          hasChild = Math.random() > 0.5;
        }

        setTimeout(() => {
          var data;
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }

          resolve(data);
        }, 500);
      }
    }
  };
</script>
 

大致效果：

為搜尋內容欄

本文來自部落格園，作者：zwbsoft，轉載請註明原文連結：https://www.cnblogs.com/zwbsoft/p/15961268.html