Element-UI：el-table 表头筛选

前言

需求：根据表头筛选表格符合条件的数据
最终实现效果：

情况一：表格没有分页

html 部分：

在列中设置 filters 和 filter-method 属性即可开启该列的筛选。
filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。

<el-table-column
   prop="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)"
   stripe
   border
   @filter-change="handlerImportTabFilter"
>
	<el-table-column
       prop="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-column
      prop="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 = 1
    getImportTabData() // 获取后端数据的接口
}

总结：

以上是两种情况，情况一：纯前端筛选；情况二：适用于配合后端接口做分页筛选。