el-table表头动态筛选条件未及时更新问题解决
el-table表头动态筛选条件未及时更新问题解决
今天遇到了一个表头筛选条件未及时更新的问题,就是数据已更新而视图还未更新,这种问题也比较常见。
一、问题
如下图所示,现在的筛选条件已经是录入中、入库中两个状态,
但是在el-table的表头筛选中,还多了一个收货中的状态,列表数据都已更新了,但是表头的筛选条件还未更新
二、解决方法
- 没有动态改变表头的条件,说明了表格的表头数据没有同步渲染出来,为了解决它,可以给整个表格加个key,这样表格数据变化的时候,可以及时渲染出最新的表头筛选条件
// 定义了一个changeKey
<el-table
ref="dataTable"
:data="dataTable"
:clearKey="filterKey"
:key="changeKey"
@filter="filterChange"
>
- 在需要调用的事件中,增加语句 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();
},
如果大家还有什么更好的方法,可以在评论中写下来,如果对你有用,我很开心:)