【VUE+Elemet】 el-tree懶加載自定義葉子節點基礎版+延伸版

博主另一篇：vue+element tree各項功能代碼詳解

鏈接：https://blog.csdn.net/Hei_lovely_cat/article/details/105763739

一、基礎版

• 效果

• element樹組件

添加了滾動條，樣式參照博主其他博客 。

<el-scrollbar style="height:100%">
          <el-tree node-key="id" ref="tree" highlight-current :props="props" :load="loadNode" lazy
           :render-content="renderContent" @node-click="handleNodeClick">
          </el-tree>
 </el-scrollbar>

• 實現數據邏輯

  將接口的引用註釋了，並，造了點數據以供參考，照搬就行。 

data() {
      return {
        componyId: "",
        props: {
        label: "name",  
        children: [],
        isLeaf: "leaf"
         }
      }
    },

•  

  // 異步樹葉子節點懶加載邏輯
      loadNode(node, resolve) { 
        // 一級節點處理 
        if (node.level == 0) { 
          this.requestTree(resolve);
        }
        // 其餘節點處理
        if (node.level >= 1) { 
          this.getIndex(node, resolve);
        }
      },
      // 異步加載葉子節點數據函數
      getIndex(node, resolve) {
          // var param = {
          //   provinceId: node.data.id
          // };
          // var url = "/base/inter";
          // this.$ajax
          //   .post(url, param)
          //   .then(out => {
              var datas = [
            {
              "id": "31",
              "name": "公司21",
              'flag':'2'
          },
          {
              "id": "32",
              "name": "公司23",
              'flag':'2'
          },
          {
              "id": "33",
              "name": "公司23",
              'flag':'2'
          }
          ]
             datas.forEach(value => {
               if (value.flag === '2') {
                   value.leaf = true
               }else{
                    value.leaf = false
               }
                
            })
            let data = datas;
            resolve(data);
            // })
            // .catch(error => {});
      },
      // 首次加載一級節點數據函數
      requestTree(resolve) {
            var datas = [
            {
              "id": "21",
              "name": "區域21",
              'flag':'1'
          },
          {
              "id": "22",
              "name": "區域23",
              'flag':'1'
          },
          {
              "id": "23",
              "name": "區域23",
              'flag':'1'
          }
          ] 
             datas.forEach(value => {
                value.leaf = false
            })
            let data = datas;
            resolve(data);
      },
  //樹-轉換
        handleNodeClick(value) { 
          if (value.flag == '2') {
            this.componyId = value.id;
            this.getAllList()
          }
        },
  renderContent: function (h, {
          node,
          data,
          store
        }) {
            if (data.flag == '2') {
              return ( < span > < i class = 'el-icon-office-building'
                style = "color: #409EFF;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
              } else if (data.flag == '1'){
                return ( < span > < i class = 'el-icon-folder-opened'
                  style = "color: #FFB427;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
                }
            },

  注意：樹節點切換時，設置的是父節點不走接口，只有子節點可以；接口返回值返回了當前級別，用來區分圖標！

二、延伸版 

• 效果

•  element樹組件

  <el-tree node-key="id" ref="tree" highlight-current :props="props" :load="loadNode" lazy
             :render-content="renderContent" @node-click="handleNodeClick">
  </el-tree>

• 實現數據邏輯

props: {
        label: "name",  
        children: [],
        isLeaf: "leaf"
         },
outletId: "",

 

// 異步樹葉子節點懶加載邏輯
    loadNode(node, resolve) { 
      // 一級節點處理 
      if (node.level == 0) { 
        this.requestTree(resolve);
      }
      // 其餘節點處理
      if (node.level >= 1) { 
        this.getIndex(node, resolve);
      }
    },
    // 異步加載葉子節點數據函數
    getIndex(node, resolve) {
        //node.data.id
        //上級-區域
        if(node.data.flag=='1'){
            var datas = [{
            "id": "31",
            "name": "公司21",
            'flag':'2'
        },
        {
            "id": "32",
            "name": "公司23",
            'flag':'2'
        },
        {
            "id": "33",
            "name": "公司23",
            'flag':'2'
        },
        {
            "id": "34",
            "name": "區域34",
            'flag':'1'
        }
        ]
           datas.forEach(value => {
                  value.leaf = false
              
          })
          let data = datas;
          resolve(data);
        }
        //上級-企業
        else if(node.data.flag=='2'){
            var datas = [
          {
            "id": "41",
            "name": "排口21",
            'pollutionSourceId':'3',
            'status':0
        },
        {
            "id": "42",
            "name": "排口23",
            'pollutionSourceId':'3',
            'status':1
        },
        {
            "id": "43",
            "name": "排口23",
            'pollutionSourceId':'3',
            'status':1
        }
        ]
           datas.forEach(value => {
             if (value.pollutionSourceId != undefined) {
                 value.leaf = true
             }else{
                  value.leaf = false
             }
              
          })
          let data = datas;
          resolve(data);
        }
    },
    // 首次加載一級節點數據函數
    requestTree(resolve) {
          var datas = [
          {
            "id": "21",
            "name": "區域21",
            'flag':'1'
        },
        {
            "id": "22",
            "name": "區域23",
            'flag':'1'
        },
        {
            "id": "23",
            "name": "區域23",
            'flag':'1'
        }
        ] 
           datas.forEach(value => {
              value.leaf = false
          })
          let data = datas;
          resolve(data);
    },
      //樹-轉換
      handleNodeClick(value) { 
        if (value.pollutionSourceId != undefined) {
          this.outletId = value.id;
          this.getAllListChange()
        }
      },
 renderContent: function (h, {
        node,
        data,
        store
      }) {
          if (data.pollutionSourceId != undefined) {
            if(data.status == 0){
               return ( < div > <el-tag type="success" size="small" class='work-pollution-tree'>運行</el-tag>
               <span title={data.name} class = 'style-demo'>{data.name}</span > </div>);
            }else if(data.status == 1){
             return ( < div > <el-tag type='danger' size="small" class='stop-pollution-tree'>停運</el-tag>
             <span title={data.name} class = 'style-demo'>{data.name}</span > </div>);
            }
            } else{
              return ( < span > < i class = 'el-icon-folder-opened'
                style = "color: #FFB427;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
              }
          },