目录

• • • （一）问题描述
    • （二）实现步骤
    • • 1. `el-table` 中添加 `@filter-change="handleFilterChange"`
      • 2. `el-table-column`中添加`column-key="给这一列取一个唯一标识"`
      • 3. 筛选

（一）问题描述

element官网例子，表格筛选如下图。
官网链接：https://element.eleme.cn/#/zh-CN/component/table

如果你的表格分页了，那么这个筛选只能筛选当页的数据，原因是我门从接口得到的数据只有当页的。此时，我们要做全局筛选，即选择一个筛选条件，请求接口，接口返回给你本页的所有符合条件的数据。

为什么做全局筛选？
如果纯前端筛选，在本页数据就没有符合条件的数据时，筛完之后，表格为空。但是，符合这个条件的数据在其他页面有啊。感觉就像没有符合这个筛选条件的数据一样。

前后端结合的全局筛选，向后端发送筛选条件之后，后端把所有符合条件的都返回。

（二）实现步骤

1. el-table 中添加 @filter-change="handleFilterChange"

<el-table 
  :data="tableData" 
  class="my-table" 
  @filter-change="handleFilterChange"
>

2. el-table-column中添加column-key="给这一列取一个唯一标识"

<el-table-column
  :key="item.id"
  :prop="item.id"
  :label="item.name"
  column-key="keyStatus">
</el-table-column>

3. 筛选

handleFilterChange(val) {//参数val是你选择的筛选条件
  //把这个筛选条件通过接口传给后端，让后端去筛
},

//有错误，请指正，接受批评，万分感谢。