element表格表头模糊查询

要实现 element 表格表头的模糊查询，可以使用 element-ui 中的 el-table 组件，结合 el-table-column 组件和 el-input 组件来实现。

具体步骤如下：

1. 在 el-table 中添加 :data 属性绑定表格数据源，添加 :highlight-current-row="true" 属性高亮当前行。

2. 在 el-table-column 中添加 :prop 属性绑定数据源的字段名，添加 :label 属性设置表头名称。

3. 在 el-table 中添加 el-input 组件作为表头搜索框，使用 v-model 双向绑定输入框的值，并使用 @input 事件监听输入框内容的变化。

4. 使用自定义过滤函数对表头名称进行模糊匹配，过滤出符合条件的表头名称。

示例代码如下：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索内容" @input="handleInput"></el-input>
    <el-table :data="tableData" :highlight-current-row="true">
      <el-table-column v-for="column in filteredColumns" :prop="column.prop" :label="column.label" :key="column.prop"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      columns: [
        { prop: 'id', label: '编号' },
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
      ],
    };
  },
  computed: {
    filteredColumns() {
      const searchText = this.searchText.trim().toLowerCase();
      if (!searchText) return this.columns;

      return this.columns.filter(column => column.label.toLowerCase().includes(searchText));
    },
  },
  methods: {
    handleInput() {
      this.$forceUpdate(); // 强制更新表格列
    },
  },
};
</script>

在上面的代码中，我们使用 computed 计算属性 filteredColumns 进行过滤，如果搜索框中没有内容，则直接返回所有列，否则返回符合搜索条件的列。handleInput 方法用于监听输入框内容的变化并强制更新表格列。