美文网首页
ElementUI tree 异步树(懒加载)循环展开指定子节点

ElementUI tree 异步树(懒加载)循环展开指定子节点

作者: Cherry丶小丸子 | 来源:发表于2021-07-07 21:34 被阅读0次

    项目中根据子节点 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);
        })
    }
    
    

    相关文章

      网友评论

          本文标题:ElementUI tree 异步树(懒加载)循环展开指定子节点

          本文链接:https://www.haomeiwen.com/subject/xkuaultx.html