elementui中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();
    },

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