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

最新推荐文章于 2024-06-28 14:59:29 发布

Pakho_Yip

最新推荐文章于 2024-06-28 14:59:29 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： elementui vue.js

本文链接：https://blog.youkuaiyun.com/Pakho_Yip/article/details/128921570

Vue 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了在使用el-table时遇到的表头筛选条件未及时更新的问题，提供了解决方案——通过添加key属性并动态改变key值来强制表格重新渲染，确保视图与数据同步。在需要更新筛选条件的事件中，改变changeKey的值可触发渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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