vue table解决分页不能筛选全部数据的问题

妖狐艹你老母 2023-10-11 14:58 9阅读 0赞

我们在使用element ui中的table自定筛选条件时只能筛选当页数据而无法检索所有数据，这是因为我们把筛选条件定义在列上  
所以我们把filter-change绑定在最外部即el-table上，如下所示

<el-table
      :data="bookRoomList"
      :ref="bookRoomList"
      @filter-change="handleFilterChange"
      class="bookTable"
      max-height="100%"
      stripe>

此时我们还需要在对应的筛选列上面定义一个column-key来作为筛选的监听状态

<el-table-column
      :filter-multiple="false"
      :filters="[
        { text: '未审批', value: '0' },
        { text: '已审批', value: '1' },
        { text: '不予审批', value: '2' },
      ]"
      column-key="aStatus"
      filter-placement="bottom-end"
      label="审批状态"
      prop="status"
      width="180">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.status=='0'">未审批</el-tag>
        <el-tag type="success" v-if="scope.row.status=='1'">已审批</el-tag>
        <el-tag type="danger" v-if="scope.row.status=='2'">不予审批</el-tag>
      </template>
    </el-table-column>

对应的handleFilterChange事件如下：

handleFilterChange(filters) {
        
      console.log(filters)
      const _this = this;
      if (filters.aStatus.length > 0) {
        
        _this.status = filters.aStatus[0];
      } else {
        
        _this.status = undefined;
      }
      this.getList();//此处修改为自己定义的查询函数或者其他操作
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ_size_16_color_FFFFFF_t_70_pic_center]

控制台打印的filters如下：  
![在这里插入图片描述][20201108190418457.png_pic_center]

其中aStatus就是filters对应的value值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ_size_16_color_FFFFFF_t_70_pic_center 1]

当选择全部或重置时filters.aStatus就是空数组  
![在这里插入图片描述][20201108190439141.png_pic_center]

至此一个表格的分页不能筛选全部的问题就迎刃而解

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201108190406946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ==,size_16,color_FFFFFF,t_70#pic_center
[20201108190418457.png_pic_center]: https://img-blog.csdnimg.cn/20201108190418457.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020110819042947.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ==,size_16,color_FFFFFF,t_70#pic_center
[20201108190439141.png_pic_center]: https://img-blog.csdnimg.cn/20201108190439141.png#pic_center