vue中el-tree增加節(jié)點(diǎn)后如何重新刷新
更新時(shí)間：2022年08月02日 14:44:36 作者：xy405580364
這篇文章主要介紹了vue中el-tree增加節(jié)點(diǎn)后如何重新刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
給el-tree增加節(jié)點(diǎn)后重新刷新
1.樹(shù)形組件
<el-tree v-if="openPanel" //重加載 :data="data" //樹(shù)形數(shù)據(jù) :props="defaultProps" node-key="id" //默認(rèn)展開(kāi)節(jié)點(diǎn) :default-expanded-keys="[-1]" //默認(rèn)展開(kāi)節(jié)點(diǎn)：-1 @node-click="handleNodeClick"> //點(diǎn)擊事件 </el-tree>
2.data 初級(jí)節(jié)點(diǎn)"儀表板"默認(rèn)展開(kāi)
data() {
return {
openPanel:true,
data: [{
id: -1,
label: '儀表板',
children: [
]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
見(jiàn)圖：
3.完成增加save操作后，重新查詢(xún)加載樹(shù)
//先增加
this.doAdd(val);
//然后清空樹(shù)的數(shù)據(jù)
this.sup_this.data = [{
id: -1,
label: '儀表板',
children: [
]
}];
//在0.1s后重新查詢(xún)并加載樹(shù)
setTimeout(() => {
//查詢(xún)樹(shù)的數(shù)據(jù)
this.queryPanel();
//<el-tree>組件使用v-if重新加載
this.openPanel = false;
this.sup_this.$nextTick(() => {
this.openPanel = true;
})
}, 100);
自動(dòng)加載并打開(kāi)子節(jié)點(diǎn)。
el-tree全樹(shù)刷新,節(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);全樹(shù)刷新
1.保存上次展開(kāi)節(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.清除本次樹(shù)的store數(shù)據(jù)
nodesMap = {};3.設(shè)置樹(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組件之全局注冊(cè)和局部注冊(cè)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3的頁(yè)面跳轉(zhuǎn)有兩種方式，第一種是標(biāo)簽內(nèi)跳轉(zhuǎn)，第二種是編程式路由導(dǎo)航，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2023-05-05
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開(kāi)發(fā)想省時(shí)間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue3安裝dataV報(bào)錯(cuò)問(wèn)題解決方案
這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報(bào)錯(cuò)問(wèn)題解決方案的相關(guān)資料,dataV用于大屏展示,個(gè)人覺(jué)得比echarts簡(jiǎn)單很多,需要的朋友可以參考下2023-06-06
Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決
這篇文章主要介紹了Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
今天小編就為大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式
這篇文章主要介紹了對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于Vant UI框架實(shí)現(xiàn)時(shí)間段選擇器
這篇文章主要為大家詳細(xì)介紹了基于Vant UI框架實(shí)現(xiàn)時(shí)間段選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
組件是 vue.js 最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用,針對(duì)不同的使用場(chǎng)景,如何選擇行之有效的通信方式？這是我們所要探討的主題,本文總結(jié)了 vue 組件間通信的幾種方式,需要的朋友可以參考下2025-03-03
vue?MVVM雙向綁定實(shí)例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)
使用vue也好有一段時(shí)間了,也算對(duì)其雙向綁定原理也有了解個(gè)大概,這篇文章主要給大家介紹了關(guān)于vue?MVVM雙向綁定(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)的相關(guān)資料,需要的朋友可以參考下2022-03-03