今亮点！elementui中el-table表头动态筛选条件未及时更新问题解决

2023-02-07 16:54:49 来源：博客园

(相关资料图)

el-table表头动态筛选条件未及时更新问题解决

今天遇到了一个表头筛选条件未及时更新的问题，就是数据已更新而视图还未更新，这种问题也比较常见。

一、问题

如下图所示，现在的筛选条件已经是录入中、入库中两个状态，但是在el-table的表头筛选中，还多了一个收货中的状态，列表数据都已更新了，但是表头的筛选条件还未更新

二、解决方法

没有动态改变表头的条件，说明了表格的表头数据没有同步渲染出来，为了解决它，可以给整个表格加个key，这样表格数据变化的时候，可以及时渲染出最新的表头筛选条件

// 定义了一个changeKey

在需要调用的事件中，增加语句 this.changeKey = !this.changeKey; 这样子就可以及时渲染数据了

// 筛选    filterChange(e) {      this.params.paging.pageNum = 1;      Object.assign(this.params, e);      this.filter = this.$filter.filterResult(header, this.params);      this.changeKey = !this.changeKey;      this.getList();    },

如果大家还有什么更好的方法，可以在评论中写下来，如果对你有用，我很开心:)

关键词：问题解决列表数据还有什么