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