我们element-ui组件上的树形懒加载是前端写死的数据，这样看懒加载对于前端初级的人员来说并不是很清楚，然后如果你碰到一个对懒加载不熟悉的后端，你也只会被牵着鼻子走，那这篇文章告诉你前端懒加载element-ui组件库中tree如何改造以及对应应该传什么值给后端。 话不多说，上代码。
参数解释：
- :data：初始化请求的列表
- :highlight-current:当前点击行的颜色高亮
- :load:懒加载方法
- :props:数组展示的字段
- :expand-on-click-node:控制点击当前行树节点不展示，点击图标树节点才展示
- :render-content:扩展展示内容
- @node-click:节点点击
初始化加载请求父节点（后端传给你的只有父节点）
点击父节点之后懒加载子节点（后端传给你的数据都是一层的，需要第二级节点的内容就传第二级，点了第二级就加载第三级）
后端数据格式,只返回对应的那层数据
<el-tree
:data="organizeList"
:highlight-current="true"
:load="loadNode"
:props="defaultProps"
node-key="id"
ref="tree"
:expand-on-click-node="false"
:lazy="true"
:render-content="renderContent"
@node-click="nodeClick"
>
<span
class="custom-tree-node"
style="display:flex;align-items: center;"
slot-scope="{ data }"
>
<span>{{data.orgName}}</span>
</span>
</el-tree>
loadNode(node, resolve) {
//node.level判断当前是不是第一级
if (node && node.level === 0) {
//如果当前为第一级 则通过参数0请求第一层的数据
console.log(11111)
getOrganizeListNew({ leafOrgCode:'' ,orgName:this.filterText}).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 if(node && node.level!==0){
// console.log(2222)
//如果当前不是最顶级 则node.data拿到被点击的节点本身 通过节点di请求这条数据的子集
getOrganizeListNew({ leafOrgCode:node.data.orgCode,orgName:this.filterText}).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([])
}
})
}
},
