el-table表头加入筛选功能

在 Element UI 的 `el-table` 中，要为表头添加筛选功能，你可以使用 `filterable` 和 `filters` 属性。以下是基本步骤：

1. **启用筛选功能**：
在 `el-table-column` 标签中，设置 `filterable` 为 `true` 来开启筛选功能，并提供 `filters` 数组定义可用的筛选条件。例如：

<el-table-column type="index" label="索引" width="60" filterable>
  <template slot-scope="scope">
    {{ scope.$index + 1 }}
  </template>
</el-table-column>
<el-table-column label="姓名" property="name" filterable filters="['张三', '李四', '王五']">
  <!-- 也可以动态获取数据列表中的值作为筛选项 -->
  <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>

2. **定义筛选回调**：
当筛选发生时，你还可以提供一个 `filter-method` 函数，该函数接收筛选值、当前列和所有行作为参数，返回需要展示的数据集。例如：

methods: {
  customFilterMethod(value, column, rows) {
    if (!value) {
      // 如果筛选值为空，显示所有数据
      return rows;
    }
    // 根据 value 进行过滤
    return rows.filter(row => row[column.property].includes(value));
  }
},
<el-table :filter-method="customFilterMethod"></el-table>

3. **表头筛选按钮样式**：
要改变筛选按钮的外观，可以使用 CSS 或自定义模板。