vue中el-tree增加節(jié)點(diǎn)后如何重新刷新
給el-tree增加節(jié)點(diǎn)后重新刷新
1.樹形組件
<el-tree v-if="openPanel" //重加載 :data="data" //樹形數(shù)據(jù) :props="defaultProps" node-key="id" //默認(rèn)展開節(jié)點(diǎn) :default-expanded-keys="[-1]" //默認(rèn)展開節(jié)點(diǎn):-1 @node-click="handleNodeClick"> //點(diǎn)擊事件 </el-tree>
2.data 初級(jí)節(jié)點(diǎn)"儀表板"默認(rèn)展開
data() {
return {
openPanel:true,
data: [{
id: -1,
label: '儀表板',
children: [
]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
見圖:

3.完成增加save操作后,重新查詢加載樹
//先增加
this.doAdd(val);
//然后清空樹的數(shù)據(jù)
this.sup_this.data = [{
id: -1,
label: '儀表板',
children: [
]
}];
//在0.1s后重新查詢并加載樹
setTimeout(() => {
//查詢樹的數(shù)據(jù)
this.queryPanel();
//<el-tree>組件使用v-if重新加載
this.openPanel = false;
this.sup_this.$nextTick(() => {
this.openPanel = true;
})
}, 100);

自動(dòng)加載并打開子節(jié)點(diǎn)。
el-tree全樹刷新,節(jié)點(diǎn)刷新
單節(jié)點(diǎn)刷新
1.如果你的el-tree設(shè)置了node-key=“id”,拿父節(jié)點(diǎn)的id 作為第一個(gè)參數(shù),
2.重新請(qǐng)求子節(jié)點(diǎn)數(shù)據(jù),數(shù)組作為第二個(gè)參數(shù)
3.調(diào)用updateKeyChildren
? ? ? let {
? ? ? ? updateKeyChildren,
? ? ? } = this.$refs.entityTreeRef;
? ? ??
? ? ? let res = await this.listChildrenNode(this.confTarget);
? ? ? updateKeyChildren(id, res);全樹刷新
1.保存上次展開節(jié)點(diǎn)的id (可選)
代碼如下:
let { nodesMap } = this.$refs.entityTreeRef.root.store;
let lastExpandIds = [];
let localMap = Object.values(nodesMap);
localMap.forEach(item => {
? if (item.expanded) {
? ? lastExpandIds.push(item.data.id);
? }
});
nodesMap = {};2.清除本次樹的store數(shù)據(jù)
nodesMap = {};3.設(shè)置樹的defaultExpandedKeys屬性值變量
let { nodesMap } = this.$refs.entityTreeRef.root.store;
this.defaultExpandedKeys = ids;
this.$refs.entityTreeRef.root.setData(result);以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+elementui+vuex+sessionStorage實(shí)現(xiàn)歷史標(biāo)簽菜單的示例代碼
本文主要介紹了vue+elementui+vuex+sessionStorage實(shí)現(xiàn)歷史標(biāo)簽菜單的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12
Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個(gè)普通對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象,需要的朋友可以參考下2023-08-08
Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能
今天小編就為大家分享一篇Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

