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-column
       label="姓名"
       prop="name"
       column-key="name"
       :filters="getFilterOptions(tableData, 'name')"
       :filter-method="filterHandler"
     ></el-table-column>
     <el-table-column
       label="年龄"
       prop="age"
       column-key="age"
       :filters="getFilterOptions(tableData, 'age')"
       :filter-method="filterHandler"
     ></el-table-column>
     <el-table-column
       label="地址"
       prop="address"
       column-key="address"
       :filters="getFilterOptions(tableData, 'address')"
       :filter-method="filterHandler"
     ></el-table-column>
     <el-table-column
       label="时间"
       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
     }
     },