欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中el-tree增加節(jié)點后如何重新刷新

 更新時間:2022年08月02日 14:44:36   作者:xy405580364  
這篇文章主要介紹了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)歷史標簽菜單的示例代碼

    本文主要介紹了vue+elementui+vuex+sessionStorage實現(xiàn)歷史標簽菜單的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • Vue實現(xiàn)錄制屏幕并本地保存功能

    Vue實現(xiàn)錄制屏幕并本地保存功能

    這篇文章主要介紹了Vue實現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開發(fā),結(jié)合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-04-04
  • Vue中的slot使用插槽分發(fā)內(nèi)容的方法

    Vue中的slot使用插槽分發(fā)內(nèi)容的方法

    這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • vue實現(xiàn)購物車選擇功能

    vue實現(xiàn)購物車選擇功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車選擇功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • Vue3中reactive變量重新賦值無法響應的3種處理方法

    Vue3中reactive變量重新賦值無法響應的3種處理方法

    這篇文章主要給大家介紹了關于Vue3中reactive變量重新賦值無法響應的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個普通對象轉(zhuǎn)換為響應式對象,需要的朋友可以參考下
    2023-08-08
  • Vuex實現(xiàn)數(shù)據(jù)增加和刪除功能

    Vuex實現(xiàn)數(shù)據(jù)增加和刪除功能

    今天小編就為大家分享一篇Vuex實現(xiàn)數(shù)據(jù)增加和刪除功能,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue項目實現(xiàn)面包屑導航

    vue項目實現(xiàn)面包屑導航

    這篇文章主要為大家詳細介紹了vue項目實現(xiàn)面包屑導航,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue開發(fā)之封裝上傳文件組件與用法示例

    Vue開發(fā)之封裝上傳文件組件與用法示例

    這篇文章主要介紹了Vue開發(fā)之封裝上傳文件組件與用法,結(jié)合實例形式分析了vue.js使用elementui的 el-upload插件進行上傳文件組件的封裝及使用相關操作技巧,需要的朋友可以參考下
    2019-04-04
  • vue 表單輸入格式化中文輸入法異常問題

    vue 表單輸入格式化中文輸入法異常問題

    v-model 是 vue.js 提供的語法糖,根據(jù)不同的表單控件監(jiān)聽不同的事件,實現(xiàn)對表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下
    2018-05-05
  • vue的token刷新處理的方法

    vue的token刷新處理的方法

    這篇文章主要介紹了vue的token刷新處理的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07

最新評論