element-ui在table分页的情况下实现多页筛选(单列/多列)

element-ui官网提供的筛选样例只能对当前页的数据进行筛选，但我们可以用它提供的filter-change事件和column-key属性来实现多页筛选

在element-ui官网提供的筛选样例的基础上，

el-table 标签上 加 @filter-change="filterChange"

在要筛选的那一列的 el-table-column 标签上 加 column-key="tag"

去掉 el-table-column 标签上的  :filter-method="filterTag"

代码如下：

    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%"
      @filter-change="filterChange"
    >
      <el-table-column
        column-key="tag"
        prop="tag"
        label="标签"
        width="100"
        :filters="[
          { text: '家', value: '家' },
          { text: '公司', value: '公司' },
        ]"
        filter-placement="bottom-end"
      >
      </el-table-column>

methods中：

    // 筛选状态
    filterChange(filter) {
    // 修改传给后端接口的参数，并重新调用接口
      this.queryParams.tag = filter.tag.join(',')
      this.getList()
    },

多列筛选

只需要在单列筛选的基础上，

给不同需要筛选的列设置不同的 column-key ，

在filter-change的回调中判断 filter 等于哪个 column-key

代码如下：

    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%"
      @filter-change="filterChange"
    >

      <el-table-column
        column-key="tag"
        prop="tag"
        label="标签"
        width="100"
        :filters="[
          { text: '家', value: '家' },
          { text: '公司', value: '公司' },
        ]"
        filter-placement="bottom-end"
      >
      </el-table-column>

      <el-table-column
        column-key="sex"
        prop="sex"
        label="性别"
        width="100"
        :filters="[
          { text: '男', value: '男' },
          { text: '女', value: '女' },
        ]"
        filter-placement="bottom-end"
      >
      </el-table-column>

methods中：

    // 筛选状态
    filterChange(filter) {
        if(filter['tag']){
          // 修改传给后端接口的参数，并重新调用接口
          this.queryParams.tag = filter.tag.join(',')
          this.getList()
        }
        else{
          // 修改传给后端接口的参数，并重新调用接口
          this.queryParams.sex = filter.sex.join(',')
          this.getList()
        }
    },

可以参考一下这篇文章，讲的很详细  vue使用elementui中的el-table后端筛选功能讲解 - 水冗水孚的文章 - 知乎

当然如果需求比较奇怪，也可以不用element-ui提供的表格筛选方法，直接在表头上嵌入popover实现多页筛选，效果如下

代码如下

<template>
  <div>
    <!-- 表格 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" width="180">
        <template slot="header" slot-scope="scope">
          <el-popover
            ref="popover"
            placement="bottom"
            trigger="click"
            popper-class="popoverStyle"
          >
            <div slot="reference" class="div-popover">
              姓名<i class="el-icon-arrow-down" />
            </div>
            <el-checkbox-group v-model="checkList" style="width: 80px">
              <el-checkbox label="王小虎" class="el-checkbox__statusFirst"
                >王小虎</el-checkbox
              >
              <el-checkbox label="王大锤" class="el-checkbox__statusOthers"
                >王大锤</el-checkbox
              >
            </el-checkbox-group>
            <el-row :gutter="1">
              <el-col :span="12">
                <el-link
                  :underline="false"
                  type="primary"
                  :disabled="checkList.length == 0"
                  @click="filterStatus"
                  >筛选</el-link
                >
              </el-col>
              <el-col :span="12">
                <el-link :underline="false" type="primary" @click="resetQuery"
                  >重置</el-link
                >
              </el-col>
            </el-row>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top: 15px">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
 
  <script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王大锤",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王大锤",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王大锤",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王大锤",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王大锤",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王大锤",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王大锤",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableData2: [],
      checkList: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
    };
  },
  created() {
    this.tableData2 = this.tableData;
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //筛选
    filterStatus() {
      let newArr = this.tableData.filter((item) => {
        console.log(this.checkList);
        return item.name == this.checkList[0] || item.name == this.checkList[1];
      });
      this.tableData = newArr;
      //点击筛选后，popover消失
      this.$refs.popover.showPopper = false;
    },
    //重置
    resetQuery() {
      this.tableData=this.tableData2
      this.checkList = [];
      //点击重置后，popover消失
      this.$refs.popover.showPopper = false;
    },
  },
};
</script>
<style>
.div-popover {
  display: inline-block;
}
.el-checkbox__statusFirst {
  display: block;
  margin-bottom: 8px;
}
.el-checkbox__statusOthers {
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
}
.el-popover.popoverStyle {
  min-width: 100px;
}
.el-popover.popoverStyle {
  min-width: 100px;
}
</style>