el-table表头做过滤

实现一个 el-table 表头做过滤功能

1. 需求：el-table 表头做过滤功能，根据选择的值返回对应的表格数据

2. 实现步骤：

   <el-table :data="tableData"><el-table-column type="selection"></el-table-column><el-table-column type="index" label="序号"></el-table-column><el-table-columnlabel="姓名"prop="name"column-key="name":filters="getFilterOptions(tableData, 'name')":filter-method="filterHandler"></el-table-column><el-table-columnlabel="年龄"prop="age"column-key="age":filters="getFilterOptions(tableData, 'age')":filter-method="filterHandler"></el-table-column><el-table-columnlabel="地址"prop="address"column-key="address":filters="getFilterOptions(tableData, 'address')":filter-method="filterHandler"></el-table-column><el-table-columnlabel="时间"prop="endTime"column-key="endTime":filters="getFilterOptions(tableData, 'endTime')":filter-method="filterHandler"></el-table-column>
   </el-table>
   

   • js 部分

     data() {
     return {tableData: [{ name: '张三', age: 18, address: '北京', endTime: '2021-01-01' },{ name: '张三11', age: 18, address: '北京33', endTime: '2021-01-01' },{ name: '李四', age: 20, address: '上海', endTime: '2021-02-01' },{ name: '王五', age: 22, address: '广州', endTime: '2021-03-01' },{ name: '赵六', age: 24, address: '深圳', endTime: '2021-04-01' },{ name: '钱七', age: 26, address: '杭州', endTime: '2021-05-01' },{ name: '孙八', age: 28, address: '成都', endTime: '2021-06-01' },{ name: '周九', age: 30, address: '武汉', endTime: '2021-07-01' },{ name: '吴十', age: 32, address: '南京', endTime: '2021-08-01' },{ name: '郑十一', age: 34, address: '重庆', endTime: '2021-09-01' },{ name: '王十二', age: 36, address: '西安', endTime: '2021-10-01' },],timeFilterOptions: []
     }
     },
     methods: {
     filterHandler(value, row, column) {const property = column['property'];return row[property] === value;
     },
     getFilterOptions(dataList, key) {const filterList = []dataList.map(item => {if (item[key]) {filterList.push(item[key])}})let filterOptions = Array.from(new Set(filterList))filterOptions = filterOptions.map(item => {return {text: item,value: item}})return filterOptions
     }
     },