在進行懶加載的樹組件中，操作子節(jié)點新增、修改以及刪除操作時，需要對樹組件進行局部刷新：文章來源地址http://www.zghlxwxcb.cn/news/detail-683780.html
/* 懶加載 */
async loadNode(node, resolve) {
if (node.level === 0) {
// 異步加載根節(jié)點數(shù)據(jù)
const data = await fn({ parentId: '' });
resolve(data);
this.$nextTick(() => {
const nodeData = node.childNodes[0];
// 設(shè)置選中項
this.$refs.treeRef.setCurrentKey(data[0].id);
// 默認(rèn)展開最外層節(jié)點
nodeData.expanded = true;
// 自動加載二級節(jié)點的數(shù)據(jù)
nodeData.loadData();
});
} else if (node.level > 0) {
// 異步加載子節(jié)點數(shù)據(jù)
const data = await fn({ parentId: node.data.id });
resolve(data);
}
},
/* 刷新當(dāng)前節(jié)點 */
refreshTreeNode(node) {
// 更改當(dāng)前節(jié)點的加載狀態(tài)
node.loaded = false;
// 重新加載數(shù)據(jù)，入?yún)榧虞d數(shù)據(jù)完成后執(zhí)行的回調(diào)函數(shù)
node.loadData(()=>{
// 設(shè)置選中節(jié)點（缺少此步驟則會丟失選中狀態(tài)）
this.$refs.treeRef.setCurrentKey(node?.data?.id || 0);
});
},
/* 刷新父節(jié)點 */
refreshParentTreeNode(node, isChangeSelect) {
// 更改父節(jié)點的加載狀態(tài)
node.parent.loaded = false;
// 重新加載數(shù)據(jù)
node.parent.loadData(() => {
if(!isChangeSelect) {// 不改變選中項
this.$refs.treeRef.setCurrentKey(node?.data?.id || 0);
} else {// 選中父節(jié)點
this.currentNode = node.parent;
this.$refs.treeRef.setCurrentKey(node.parent?.data?.id || 0);
// todo 更改樹節(jié)點選中項執(zhí)行的數(shù)據(jù)操作
// ...
}
});
},
文章來源：http://www.zghlxwxcb.cn/news/detail-683780.html
到了這里，關(guān)于在el-tree懶加載中進行局部刷新的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
