Element+Vue实现表格全局筛选功能详解

Element+Vue实现表格全局筛选功能详解

引用

CSDN

1.

https://blog.csdn.net/weixin_43671292/article/details/141823818

在使用Element UI和Vue开发项目时，如何实现表格的全局筛选功能是一个常见的需求。本文将详细介绍如何在分页的情况下实现表格的筛选功能，确保筛选效果能够应用于所有页面，而不仅仅是当前页面。

表格部分代码

在表格组件中，需要监听filter-change事件，并在数据渲染时使用filteredData进行分页处理。

<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>  

获取表格数据

通过inquire方法获取表格数据，并将原始数据存储在tableData中，筛选后的数据存储在filteredData中。

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

记录筛选参数

定义filterProps对象来记录筛选参数，注意要与表格列的column-key保持一致。

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

筛选处理

在filterChange方法中处理筛选逻辑，根据筛选条件更新filteredData。

filterChange(filterObj) {
      //宿舍区域
      if (filterObj.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) 
      )
    },  

分页处理

确保分页组件的总条数根据筛选后的数据长度进行更新。

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