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

2021-07-07  本文已影响0人  Cherry丶小丸子

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

上一篇 下一篇

猜你喜欢

热点阅读