项目中根据子节点 id 展开异步树节点,需要后端返回当前子节点的父级节点 id 集合
<el-tree
:data="rootNodeData"
class="catalogTree"
ref="catalogTree"
highlight-current
node-key="id"
lazy
:load="treeLoadNode">
</el-tree>
data(){
return {
rootNodeData: [],
nodeZero: null,
resolveZero: null,
loading: false
}
},
methods: {
/**
* 目录懒加载
* @param {Object} node
* @param {Object} resolve
*/
treeLoadNode(node, resolve){
// 开启 “加载中” 动画
if(node.level == 0) this.loading = true;
this.$axios.getTreeData({
pid: node.level === 0 ? 0 : node.data.id
}).then(res => {
// 请求接口,返回数据
let data = res.data.data;
// 暂存 方法参数,以便手动调用 此方法
if(node.level == 0){
this.nodeZero = node;
this.resolveZero = resolve;
this.rootNodeData = data; // 根节点赋值
}else{
// 渲染树
resolve(data);
}
this.loading = false;
this.$nextTick(() => {
// 循环展开节点
let pidList = data.pidList;
for (let i = 0; i < pidList.length; i++) { // 循环当前节点所有pid集合
for (let j = 0; j < node.childNodes.length; j++) { // 循环子节点
// 查找相同id节点使之其一层一层展开
if (pidList[i + 1] == node.childNodes[j].data.id) {
node.childNodes[j].expand(); // 会重新调用 懒加载方法 treeLoadNode
break;
}
}
}
let paramsId = this.$route.query.id ? this.$route.query.id : data[0].id;
// 根据 id 获取节点信息
let getNodeById = this.$refs.catalogTree.getNode(paramsId);
if(getNodeById){
// 设置节点选中
this.$refs.catalogTree.setCurrentKey(paramsId);
// 并跳转
if(!this.$route.query.id) this.$router.replace({ path: this.$route.path, query: { id: paramsId }});
// 设置面包屑二级
this.breadCrumbData.levelTwo = getNodeById.data.name;
// 设置 localStorage
this.$ls.set('kbTreeNode', getNodeById.data);
}
})
})
}
}