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

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

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

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

其实只需要
this. s e t ( t h i s . 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
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Element UI的`el-table`组件中,如果你想在已有表格的基础上添加新的数据行,你可以使用`rowspan`和`expanded-row-keys`属性来动态渲染。这里是一个简单的步骤说明: 1. 首先,确保你已经初始化了一个`el-table`实例,并且它有一个`data`属性来存储原始数据。 ```html <template> <el-table :data="tableData" ref="table"> <!-- 表头部分 --> <el-table-column type="index"></el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { data() { return { tableData: [] // 初始的数据数组 }; }, methods: { addNewRow(newData) { // 添加新数据 this.tableData.push(newData); // 如果你想让新添加的行默认展开,可以这样做: this.$refs.table.setCurrentKey(newData.key || newData.id); // 假设你有key或id字段 // 或者使用 `expanded-row-keys` 来控制展开状态 // 这里假设`expandedRowKeys`已经在data或方法中定义过 if (!this.expandedRowKeys.includes(newData.key)) { this.expandedRowKeys.push(newData.key); } } } }; </script> ``` 在`methods`中,`addNewRow`方法接收新的数据对象`newData`,然后将其追加到`tableData`数组中。如果希望新添加的行立即展开,可以通过`setCurrentKey`方法设置当前展开的行。 如果你需要在表格中的特定位置插入新行,或者有更多的数据操作需求,你可能需要根据具体业务场景调整代码。记得`el-table`的更新是异步的,所以在添加数据后,可能需要手动触发一次表格的更新,例如: ```javascript this.$nextTick(() => { this.$refs.table.doLayout(); }); ``` 如果你想要详细了解如何监听数据变化后自动刷新表格,或者如何处理分页、懒加载等情况,可以继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Aklcoming

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

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

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

打赏作者

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

抵扣说明:

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

余额充值