项目中根据子节点 id 展开异步树节点,需要后端返回 当前子节点的左右父级节点id集合
<el-tree
:data="rootNodeData"
class="catalogTree"
ref="catalogTree"
highlight-current
node-key="id"
lazy
:load="treeLoadNode">
</el-tree>
data(){
return {
pidList: [],
currentNodeId: ''
}
}
/**
* 目录懒加载
* @param {Object} node
* @param {Object} resolve
*/
treeLoadNode(node, resolve){
let pid = '';
if (node.level === 0) {
pid = 0;
}else{
pid = node.data.id;
}
this.$axios.getTreeData({
pid: pid
}).then(res => {
// 请求接口,返回数据
if(res.data.data.length != 0){
res.data.data.map(item => {
// 设置 isLeaf 字段,以便隐藏没有子级节点的箭头
if(item.extend2 == '1'){ // 有子级节点
item.isLeaf = false;
}else{ // 没有子级节点
item.isLeaf = true;
}
})
}
// 渲染树
resolve(res.data.data.doorProblemList);
// 循环展开节点
for(let i = 0; i < node.childNodes.length; i++){ // 循环子节点
for(let j = 0; j < this.pidList.length; j++){ // 循环当前节点所有pid集合
// 查找相同id节点使之其一层一层展开
if(node.childNodes[i].data.id == this.pidList[j + 1]){
node.childNodes[i].expand();
}
}
}
// 设置选中的节点
this.$refs.catalogTree.setCurrentKey(this.currentNodeId);
})
}
网友评论