Element的el-table懒加载操作刷新问题

本文介绍了一种简单有效的el-table懒加载刷新方法,通过直接修改lazyTreeNodeMap来实现父子节点数据的快速更新,避免了复杂的map集合操作,极大地简化了代码逻辑。

Element的el-table懒加载操作刷新问题

el-table的懒加载非常实用,而且很方便的以树形结构展示,但是唯一不足的就是对其父子两级操作刷新不是很友好,在网上也找了很多解决方法,基本上都可以用,但是一开始觉得非常麻烦,
需要使用map集合存入,再取出刷新,

知识点来了
知识点来了
知识点来了
干货
干货
干货

其实只需要
this.set(this.set(this.set(this.refs.table.store.states.lazyTreeNodeMap,parentId,childrenData)
这么一句话就足以了,用自己逻辑进行处理,后边两个参数传值,parenntId是父级ID,childrenData是你刷新子级的数组,

代码的for循环判断,是为了满足随机操作的问题,
==tableData==是父级数组数据,和子集类型做判断,就可以随意操作子集数据了,
setTimeout加1000是为了防止异步数据加载不到的问题,


deleteInfo(item){
	//...省略...
	this.deleteData({
	  url: this.url,
	  query: this.$qs.stringify(query)
	}).then(function(data) {
		  that.refreshVal(item.Type);
	});
},


refreshVal(type){
	this.searchInfo(type,1);
	setTimeout(() => {
	   var parentId="";
	   this.tableData.forEach(data=>{
		   if(data.Val==type){
			  parentId = data.ID;
			}
		})
 	    this.$set(this.$refs.table.store.states.lazyTreeNodeMap,parentId,this.childrenData)
   }, 1000)
},
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Aklcoming

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值