el-table表头做过滤

小意恩2025-09-11 9:57

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

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

实现步骤：

html 复制代码

<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 部分

javascript 复制代码

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
}
},