先看效果：
image
1.界面中：
<el-tree
:data="treeData"
:props="defaultProps"
:load="loadNode"
@node-click="handleNodeClick"
lazy>
</el-tree>
2.data中：
treeData: [ ], // 树节点
defaultProps: { // 修改el-tree默认data数组参数
children: 'children',
label: 'name',
id: 'id',
parentId: 'parentId',
isLeaf: false // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
},
3.script中：
loadNode(node, resolve) { // 加载 树数据
let that = this;
if (node.level === 0) {
that.loadtreeData(resolve);
}
if (node.level >= 1) {
this.getChildByList(node.data.id, resolve);
return resolve([]); // 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
}
},
loadtreeData( resolve) { // 获取loadtreeData 就是父节点数据，getChildByList就是异步获取子节点数据
let params = {ParentID : 0};
this.$http({url: "",data: params,type: 'get'}).then(res =>{
// console.log("商品信息的 tree: ",res)
if(res.success == true) {
let data = res.data;
// 前者item.参数名称为 prop中的规定的属性名称
data.forEach(item => {
item.name = item.name;
item.parentId = item.parentId;
item.id = item.id;
item.isLeaf = true;
});
resolve(data)
}else {
return false;
}
}).catch(err =>{
console.log(err);
});
},
getChildByList( _parentID,resolve) { // 获取子节点请求
let params = {ParentID : _parentID};
this.$http({url: "",data: params,type: 'get'}).then(res =>{
if(res.success == true) {
let data = res.data;
data.forEach(item => {
item.name = item.name;
item.parentId = item.parentId;
item.id = item.id;
item.isLeaf = false;
});
resolve(data);
} else {
return false;
}
}).catch(err =>{
console.log(err);
});
},
handleNodeClick(data) { // 节点被点击时的回调
console.log(data)
},
