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

2021-05-10  本文已影响0人  Cherry丶小丸子
<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
上一篇下一篇

猜你喜欢

热点阅读