ElementUI tree 异步树(懒加载)循环展开指定子节点,并设置高亮选中

项目中根据子节点 id 展开异步树节点,需要后端返回当前子节点的父级节点 id 集合



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);
                }
            })
        })
    }
}

你可能感兴趣的:(ElementUI tree 异步树(懒加载)循环展开指定子节点,并设置高亮选中)