el-tree懒加载部分

本文只展示懒加载部分

:props="treeProps"
:load="loadNode" 
 lazy  

<el-tree
          ref="tree"
          style="height:100%"
          class="filter-tree"
          node-key="id"
          :data="data"
          :props="treeProps"
          show-checkbox
          :filter-node-method="filterNode"
          @check="handleCheckChange"
          :load="loadNode"          
          lazy  
        />

treeProps: {
        children: 'children',
        label: 'itemCateName',
        isLeaf: 'leaf'
      }

**

数据一次性全部获取案例：

**

loadNode(node, resolve) {
      if (node.level === 0) {    //对第一层级的处理
        node.data.forEach(item => {
          if (item.children === undefined) {
              item.leaf= true       //叶子节点判断，就是前面那个箭头..
            }else{
              item.leaf= false
            }
        })
        return resolve(node.data)   //暴露为第一层级
      }
      if(node.level > 0) {       //对后续层级的处理
        function digui(bianli) { //递归    //以递归的形式判断设置叶子节点判断
          bianli.forEach(item=>{
            if(item.children) {
              item.leaf= false
              digui(item.children)
            }else {
              item.leaf= true
            }
          })
        }
        digui(node.data.children)
      }
      setTimeout(() => {        
        console.log('diuwaduicusacduhscdsadnsadk',node);
        resolve(node.data.children)        //暴露后续的层级
      },500)
    },

**

分层获取数据案例：

**
本例是通过3个接口展示了3棵树，仅第一棵树有子级，后两颗没有

loadNode(node, resolve) {
      if(node.data.children){          //对3个数的第一层级分别处理
        if (node.level === 0) {      //品类     //第一层级处理
          if (node.data.hasChildren === '1') {         //有无子级（1有0无）
                node.data.children.forEach(item => {
                  item.leaf= false
                })
          }else if(node.data.hasChildren === '0') {
            node.data.children.forEach(item => {
              item.leaf= true
            })
          }
          return resolve(node.data.children)   //暴露
        }
      } else {
        if (node.level === 0) {                //品牌和供应商有效
          node.data.forEach(item => {
            if (item.children === undefined) {
                item.leaf= true
              }else{
                item.leaf= false
              }
          })
          return resolve(node.data)
        }
      }
      if(node.level > 0) {             //对子层级做处理（没用到）
        console.log('diuwaduicsadk',node);
        console.log('diuwaduicsadk',node.data);
      }

      //子级请求
      var zijiparams = this.zjparams
      var id = node.data.id
      var level = node.level       
      Axios.get('/api/newMove/getAllCateListByLevel',{      子级数据请求
        params: {
          ...zijiparams,
          code:id,
          level:level
        }
      }).then(res => {
        console.log(res);
        res.data.children.forEach(item=>{
          if(res.data.level === '3') {
            item.leaf= true
          } else {
            item.leaf= false
          }
        })
        resolve(res.data.children)      //别忘了暴露
      })
    },

做一个小扩展吧，大家有没有遇到过数据量过大，导致渲染过慢的情况？我这里就遇到了，然后我做了一个小处理

} else {
        if (node.level === 0) {                //品牌和供应商
          node.data.forEach(item => {
            if (item.children === undefined) {
                item.leaf= true
              }else{
                item.leaf= false
              }
          })
           resolve(node.data.slice(0,50)) //先加载50条数据，速度就够快了吧
           
          setTimeout(() => {
          resolve(node.data.slice(50))  //然后在这里300毫秒后加载后面的数据
          },300)
        }
      }

其实在这里还是会有问题！
似乎树的加载确实变快了，可是没办法操作，它在卡着呢！为什么卡呢，因为在加载后面的数据啊 ! ^(0.0*)；
所以我感觉还挺low的，那么大家有没有什么好的方式呢，评论分享下，我学学呗 (;= . =;)