come on，Bro。直接上代碼。
先看效果：
1.界面中：
1 <el-tree 2 :data="treeData" 3 :props="defaultProps" 4 :load="loadNode" 5 @node-click="handleNodeClick" 6 lazy> 7 </el-tree>
2.data中：
1 treeData: [ ], // 樹節點 2 defaultProps: { // 修改el-tree默認data數組參數 3 children: 'children', 4 label: 'name', 5 id: 'id', 6 parentId: 'parentId', 7 isLeaf: false // 指定節點是否為葉子節點，僅在指定了 lazy 屬性的情況下生效 8 },
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)
},