element+vue如何实现table表格全局筛选功能

问题描述：如何在分页的情况下，实现table的筛选功能。

官网的筛选功能只能应用于当前页面，如使用分页效果则其他页面筛选功能失效

官网链接：Element - The world's most popular Vue UI framework

以下是实现方法

1.表格部分：

<el-table
    :data="
      filteredData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    "
    @filter-change="filterChange"
  >
    <el-table-column
      prop="regionId"
      label="宿舍区域"
      :filters="regionIdOptions"
      column-key="regionId"
    >
      <template v-slot="{ row }">
        {{ row.region }}
      </template>
    </el-table-column>
     <el-table-column
      label="房间性别"
      :filters="[
        { text: '女', value: 2 },
        { text: '男', value: 1 },
        { text: '夫妻', value: 3 },
      ]"
      prop="workerGender"
      column-key="workerGender"
      ><template v-slot="{ row }">
        <el-tag :type="workerGenderType(row.workerGender)">{{
          workerGenderShow(row.workerGender)
        }}</el-tag>
      </template>
    </el-table-column>
//其他内容
</el-table>

  重点内容：

 @filter-change="filterChange"    //当表格的筛选条件发生变化的时候会触发该事件   

column-key="regionId"  //指定唯一标识符

2.获取表格数据

inquire() {
      getRequest(this.baseUrl, '你的数据接口')
        .then((res) => {
          if (res.status == 200) {
            this.tableData = res.data.objects
            this.filteredData = this.tableData     //用于筛选的表格数据
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },

3.记录筛选的参数，注意要与标识内容保持一致：column-key="regionId"

filterProps: {
        workerGender: [1, 2, 3],
        regionId: [1, 2],
      },

4.筛选处理

filterChange(filterObj) {//filter会记录筛选了哪个标识
      //宿舍区域
      if (filterObj.regionId) {//如果筛选的是regionId列
        if (filterObj.regionId.length > 0) {
          this.filterProps.regionId = filterObj.regionId
        } else {
          //重置宿舍区域
          this.filterProps.regionId=[1,2]
        }
      }
      //房间性别
      if (filterObj.workerGender) {
        if (filterObj.workerGender.length > 0) {
          this.filterProps.workerGender = filterObj.workerGender
        } else {
          this.filterProps.workerGender = [1, 2, 3]
        }
      }

      //过滤数据，根据多个筛选条件对数组进行筛选
      this.filteredData = this.tableData.filter(
        (item) =>
          this.filterProps.workerGender.includes(item.workerGender) &&
          this.filterProps.regionId.includes(item.regionId) 
      )
    },

        filterObj记录了筛选的列以及选择的内容，表格中column-key="regionId"的作用就出现了，定义了唯一标识

5.注意分页数据长度按照筛选后的数据   :total="filteredData.length"

<el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="filteredData.length"
        >
        </el-pagination>