element-UItree分级加载节点问题
element-UI  tree  分级加载节点：load事件
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange">
</el-tree>
其中load⽅法事件中遇到情况如下：每个⼈应⽤场景不同，根据实际情况进⾏调整。
<script>
export default {
data() {
return {
props: {
label: 'name', // 该名称为树节点显⽰的名称
children: 'zones'
},
count: 1，
tabledata:[]，
treenodeone:'',//第⼀个节点的值。
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
//在此⽅法请求之前会执⾏loadNode⽅法
data即为节点数据node
if(data.level == deone = node;//将第⼀层节点进⾏记录，假设第五层节点还想⽤第⼀层节点数据，可将节点值⽤此⽅法全局化。        console.log(data);
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region1' }, { name: 'region2' }]);//当前为两个根节点  name变量必须与声明中的props的lable设置的内容⼀致
}421事件内容
if (node.level > 3) return resolve([]);//resolve为当前节点赋值，追加在当前节点下
///假设进⾏当前界⾯的数据值过来，假设有个搜索条件为searchuser
if(node.level == 2)//level为当前节点点击的层级
{
this.tabledata = this.tabledata.filter(t=>t.name = searchuser);//将现有数据针对搜索条件进⾏过滤。
}
///
var hasChild;
if (node.data.name === 'region1') {
hasChild = true;
} else if (node.data.name === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [{
name: 'zone' + unt++
}, {
name: 'zone' + unt++
}];
} else {
data = [];
}
resolve(data);
}, 500);
}
}
};
</script>
⼤致效果：
为搜索内容栏