element ui树形懒加载

所为的属性懒加载其实就是一次只展示一层
当用户点击时再去根据他点击的这个数据去请求他的子集

<el-tree
     :load="loadNode"
     :props="props"
      node-key="id"
      ref="tree"
      lazy
   >
   <span
     class="custom-tree-node"
     style="display:flex;align-items: center;"
     slot-scope="{ data }"
   >
       <span>{
   
   {data.name}}</span>
   </span>
</el-tree>

load是树形的数据来源 但他是一个函数
node-key是每一条数据的唯一标识 就是这个数据永远不会和其他数据值重复的字段 最规范的当然就是id
ref是可以拿到这个元素的值 vue基础中有介绍ref就不多说了
lazy 设置页面加载后自动执行一次load绑定的函数 不然你的树形就是空的
需要在data中加一个props 对应属性标签属性props

data(){
    
    
        return {
    
    
            props: {
    
    
                label: 'name',
                isLeaf: 'leaf'
            }
        }
}

下面我来简单编写一个load绑定的函数 给大家参考一下

loadNode(node, resolve) {
    
    
    //node.level判断当前是不是第一级
    if (node.level === 0) {
    
    
        //如果当前为第一级  则通过参数0请求第一层的数据
        getIdlazyTree(0).then((src) => {
    
    
            //判断请求回来数据是不是空的
            if(src.data.length > 0){
    
    
                //如果不是空的  定义一个叫peopleList的变量接收请求的数据是一个对象数组
                let peopleList = src.data;
                //然后循环遍历数据  将每一条的leaf字段赋为false 这样前面就会出现可以点击的那个小标识
                peopleList = peopleList.map(item =>{
    
    
                    item.leaf = false;
                    return item
                })
                //然后将处理好的数据扔给resolve函数   数据就会自动渲染到树形上
                return resolve(peopleList)
            }else{
    
    
                //如果数据是空的  直接扔空数组给resolve
                return resolve([])
            }
        })
    }else{
    
    
         //如果当前不是最顶级  则node.data拿到被点击的节点本身  通过节点di请求这条数据的子集
         getIdlazyTree(node.data.id).then((src) => {
    
    
             //判断请求的数据是不是空的  即这条数据有没有子集
            if(src.data.length > 0){
    
    
                //如果不为空
                //定义peopleList接收请求数据
                let peopleList = src.data;
                //将数据leaf都设为false  表示可点击
                peopleList = peopleList.map(item =>{
    
    
                    item.leaf = false;
                    return item
                })
                //将处理好的数据扔给resolve回掉
                return resolve(peopleList)
            }else{
    
    
                //如果请求的数据是空的  即 这条数据没有子集  就把空数组扔给resolve
                return resolve([])
            }
        })
    }
},

看着比较多但确实还是比较简单的
对照我的注释 很容易就看懂