我们在使用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();//此处修改为自己定义的查询函数或者其他操作
}

在这里插入图片描述

控制台打印的filters如下：
在这里插入图片描述

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

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

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

# elementui
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue