vue中el-tree增加節(jié)點后如何重新刷新
給el-tree增加節(jié)點后重新刷新
1.樹形組件
<el-tree v-if="openPanel" //重加載 :data="data" //樹形數(shù)據(jù) :props="defaultProps" node-key="id" //默認展開節(jié)點 :default-expanded-keys="[-1]" //默認展開節(jié)點:-1 @node-click="handleNodeClick"> //點擊事件 </el-tree>
2.data 初級節(jié)點"儀表板"默認展開
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);
自動加載并打開子節(jié)點。
el-tree全樹刷新,節(jié)點刷新
單節(jié)點刷新
1.如果你的el-tree設置了node-key=“id”,拿父節(jié)點的id 作為第一個參數(shù),
2.重新請求子節(jié)點數(shù)據(jù),數(shù)組作為第二個參數(shù)
3.調(diào)用updateKeyChildren
? ? ? let { ? ? ? ? updateKeyChildren, ? ? ? } = this.$refs.entityTreeRef; ? ? ?? ? ? ? let res = await this.listChildrenNode(this.confTarget); ? ? ? updateKeyChildren(id, res);
全樹刷新
1.保存上次展開節(jié)點的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.設置樹的defaultExpandedKeys屬性值變量
let { nodesMap } = this.$refs.entityTreeRef.root.store; this.defaultExpandedKeys = ids; this.$refs.entityTreeRef.root.setData(result);
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼
本文主要介紹了vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12Vue3中reactive變量重新賦值無法響應的3種處理方法
這篇文章主要給大家介紹了關于Vue3中reactive變量重新賦值無法響應的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個普通對象轉(zhuǎn)換為響應式對象,需要的朋友可以參考下2023-08-08Vuex實現(xiàn)數(shù)據(jù)增加和刪除功能
今天小編就為大家分享一篇Vuex實現(xiàn)數(shù)據(jù)增加和刪除功能,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11