elementui表头筛选表格数据

要在 ElementUI 表格中添加表头筛选功能，需要使用 `el-table-column` 组件的 `filters` 属性和 `filter-method` 属性。

首先，在 `el-table-column` 组件中设置 `filters` 属性，该属性是一个数组，用于定义筛选项。例如：

<el-table-column prop="name" label="姓名" :filters="[{text: '张三', value: '张三'}, {text: '李四', value: '李四'}]"></el-table-column>

上面的代码中定义了两个筛选项：张三和李四，当用户点击筛选按钮时，会显示这两个选项。

接下来，在 `el-table-column` 组件中设置 `filter-method` 属性，该属性是一个函数，用于处理筛选逻辑。例如：

<el-table-column prop="name" label="姓名" :filters="[{text: '张三', value: '张三'}, {text: '李四', value: '李四'}]" :filter-method="filterName"></el-table-column>

上面的代码中，我们为 `filter-method` 属性设置了一个名为 `filterName` 的方法，该方法会传入两个参数：`value` 表示用户选择的筛选项的值，`row` 表示当前行的数据对象。该方法需要返回一个布尔值，如果为 `true`，则表示该行数据符合筛选条件，否则不符合。

最后，在 `methods` 中定义 `filterName` 方法，例如：

methods: {
  filterName(value, row) {
    return row.name === value;
  }
}

上面的代码中，我们根据用户选择的筛选项的值和当前行的数据对象来判断是否符合筛选条件，如果当前行的 `name` 属性等于用户选择的值，则返回 `true`，否则返回 `false`。

完整示例代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" :filters="[{text: '张三', value: '张三'}, {text: '李四', value: '李四'}]" :filter-method="filterName"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
        { name: '赵六', age: 24, address: '深圳市' },
      ]
    }
  },
  methods: {
    filterName(value, row) {
      return row.name === value;
    }
  }
}
</script>