所为的属性懒加载其实就是一次只展示一层
当用户点击时再去根据他点击的这个数据去请求他的子集
<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([])
}
})
}
},
看着比较多但确实还是比较简单的
对照我的注释 很容易就看懂
