1.拿el-tree主键,在element-ui中,Element - The world's most popular Vue UI framework
<el-tree :data="data" node-key="pid" default-expand-all :expand-on-click-node="false" lazy
:load="loadNode" :render-content="renderContent" @node-click="handleNodeClick">
</el-tree>
props:{
label:'name',//指定节点标签为节点对象的某个属性值
children:'zones',//指定子树为节点对象的某个属性值
isLeaf:'left',//指定节点是否为叶子节点,仅在指定了 lazy 属性的情况下生效
},
--------------------------------------------------------------
方法里面写
// 懒加载
http(){
getselectContentCategoryByParentId().then((res) =>{
console.log("渲染tree--------",res.data)
this.data = res.data.result;
})
},
loadNode(node, resolve) {
if (node.level === 0) {
// 进行第一次请求
getselectContentCategoryByParentId().then((res) =>{
console.log("懒加载数据----------",res.data);
return resolve(res.data.result);
});
}
// 当根节点有子节点时,查询条件 id =pid
if (node.level >= 1){
getselectContentCategoryByParentId({
id:node.data.pid,
}).then((res) =>{
if(res.data.status == 200){
return resolve(res.data.result);
}else{
return resolve([]);
}
});
}
},