element ui筛选表头加搜索

Element UI 提供了一套直观易用的数据表格组件 `el-table`，它内置了强大的筛选功能，允许用户在表头单元格输入内容来进行过滤。要在表头添加搜索功能，你可以按照以下步骤操作：

1. **引入所需组件**：
首先，在你的 Vue 项目中导入 Element UI 的 `ElTable` 和 `ElFormItem` 组件，以及相应的样式。

<template>
  <div>
    <!-- 其他代码 -->
    <el-form-item label="搜索">
      <el-input v-model="searchText" placeholder="请输入搜索关键词"></el-input>
    </el-form-item>
    <el-table :data="filteredData" @filter-change="handleFilterChange">
      <!-- 表头设置 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- ...其他列... -->
    </el-table>
  </div>
</template>

2. **数据处理**：
定义一个 `filteredData` 变量用于存储经过筛选后的数据。在 `handleFilterChange` 方法中，当用户输入搜索内容，更新这个变量。

<script>
export default {
  data() {
    return {
      searchText: '',
      // 假设你有一个名为 'tableData' 的数组存储原始数据
      tableData: [],
      filteredData: []
    };
  },
  methods: {
    handleFilterChange(value) {
      this.filteredData = this.tableData.filter(item => {
        return Object.values(item).some(v => v.toString().includes(value));
      });
    }
    // ...
  },
};
</script>

在这个例子中，`Object.values(item)` 获取当前行的所有值，并检查它们是否包含搜索文本。如果包含，则该行会被保留，否则被过滤掉。