美文网首页
ElementUI tree 异步树(懒加载)节点局部刷新

ElementUI tree 异步树(懒加载)节点局部刷新

作者: Cherry丶小丸子 | 来源:发表于2021-05-10 16:03 被阅读0次
    <el-tree
        lazy
        ref="asyncTree"
        :data="rootDate"
        :load="loadNode"
        :node-key="id">
    </el-tree>
    
    created() {
        this.getTreeRootData('0');
    },
    methods: {
        /**
         * 获取 tree 根目录数据
         * @param {Object} id
         */
        getTreeRootData(id) {
            return new Promise((resolve, reject) => {
                this.$axios.getTreeRootData(id).then((res) => {
                    if (id == '0') {
                        this.rootDate = res.data.data;
                    } else {
                        resolve(res.data.data);
                    }
                });
            });
        },
        /**
         * 懒加载
         * @param {Object} node
         * @param {Object} resolve
         */
        loadNode(node, resolve) {
            // 如果是根目录则加载根目录数据
            if (node.level === 0) {
                return resolve(this.rootDate);
            }
            // 否则根据展开的节点 id 调取后台数据
            this.getTreeRootData(node.data.id).then(res => {
                // 如果有数据返回,则通过 resolve 方法懒加载到相应节点
                if (res) {
                    setTimeout(() => {
                        resolve(res);
                    }, 500);
                    // 否则插入空的节点
                } else {
                    return resolve([]);
                }
            });
        },
        /**
         * tree异步树(懒加载)节点局部刷新
         * @param {Object} id 将要刷新的节点的id ( id是节点的data参数,不是node参数 )
         */
        refreshNodeBy(id){
            if(id == 根节点id){ // 根节点的增删改查
                this.treeLoadRootNode('0'); // 重新加载根节点
            }else{ // 子节点的增删改查
                let node = this.$refs.asyncTree.getNode(id); // 通过节点id找到对应树节点对象
                node.loaded = false; // 设置节点为未加载状态
                node.expand(); // 主动调用展开节点方法,重新查询该节点下的所有子节点
            }
        }
    }
    
    调用:
    this.refreshNodeBy(id);
    根据情况选择传参为当前节点的id,还是当前节点的pid
    

    相关文章

      网友评论

          本文标题:ElementUI tree 异步树(懒加载)节点局部刷新

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