前言
需求：根据表头筛选表格符合条件的数据
最终实现效果：
情况一：表格没有分页
html 部分：
在列中设置 filters 和 filter-method 属性即可开启该列的筛选。
filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。
<el-table-columnprop="UploadStatus"label="上传逻辑"width="100"fixed="left":filters="[{ text: '修改', value: 1 },{ text: '新增', value: 2 },]":filter-method="filterHandler"><template slot-scope="scope"><span class="importTabSpan">{{scope.row.UploadStatus == 1 ? '修改' : '新增' }}</span></template></el-table-column>
js 部分：
filterHandler(value, row, column) {const property = column['property']return row[property] === value}
情况二：表格有分页，需要筛选所有数据中符合条件数据，配合接口数据渲染
filter-method 是数据过滤的方法，但是只支持已有数据的筛选，不支持后台筛选。 通过查找和翻阅，我们可以利用 filter-change 事件来实现。
filter-change 会返回一个参数，key：column 的 columnKey，可以用Object.keys（）获取key值，然后判断是哪一列进行了筛选操作（多列筛选时用到），value：就是筛选的条件。
html 部分：
在列中设置 filters 属性即可开启该列的筛选。filters 是一个数组。
column-key 属性官网解释如图：
@filter-change 事件官网解释如图：
<el-table:header-cell-style="headerClass":data="importTabData.members"v-loading="importTabLoading"element-loading-text="加载中..."element-loading-background="rgba(255, 255, 255, 0.75)"stripeborder@filter-change="handlerImportTabFilter"><el-table-columnprop="fidata_syncy_type"label="上传逻辑"width="100"fixed="left":filters="[{ text: '修改', value: 1 },{ text: '新增', value: 2 },{ text: '删除', value: 3 }]":column-key="columnKey[0]"><template #default="scope"><span class="importTabSpan yellow" v-if="scope.row.fidata_syncy_type == 1">修改</span><span class="importTabSpan blue" v-if="scope.row.fidata_syncy_type == 2">新增</span><span class="importTabSpan red" v-if="scope.row.fidata_syncy_type == 3">删除</span></template></el-table-column><el-table-columnprop="fidata_status"label="上传状态"width="100"fixed="left":filters="[{ text: '上传成功', value: 0 },{ text: '提交成功', value: 1 },{ text: '提交失败', value: 2 },{ text: '导入验证失败', value: 3 }]":column-key="columnKey[1]"><template #default="scope"><span class="importTabSpan green" v-if="scope.row.fidata_status == 0">上传成功</span><span class="importTabSpan blue" v-if="scope.row.fidata_status == 1">提交成功</span><span class="importTabSpan red" v-if="scope.row.fidata_status == 2">提交失败</span><span class="importTabSpan red" v-if="scope.row.fidata_status == 3">导入验证失败</span></template></el-table-column></el-table>
js 部分：
数据定义：
columnKey: ['uploadSyncType', 'uploadStatus'], // 表头筛选,各列的标识uploadSyncType: [], // 表格上传逻辑uploadStatus: [] // 表格上传状态
const handlerImportTabFilter = (val: any) => {for (const key in val) {if (key == 'uploadSyncType') {// 选好条件，点击筛选即可配合后端进行数据筛选state.uploadSyncType = val[key]} else if (key == 'uploadStatus') {// 选好条件，点击筛选即可配合后端进行数据筛选state.uploadStatus = val[key]}}state.importCurrentPage = 1getImportTabData() // 获取后端数据的接口}
总结：
以上是两种情况，情况一：纯前端筛选；情况二：适用于配合后端接口做分页筛选。
