element-plus中table表头列项显示可筛选

在Element Plus库中的Table组件中，如果你想要允许用户对表头列进行筛选，你可以利用`el-table-column`的`filters`属性。这个属性可以设置一个数组，每个元素都是一个筛选选项的对象，包含一个值（用于匹配数据的值）和一个文本（展示给用户的筛选选项）。例如：

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-input v-model.trim="filterText" placeholder="请输入姓名" @input="handleFilter(scope.$index, 'name')"></el-input>
      </template>
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- 添加筛选功能 -->
      <el-table-column filters>
        <template slot-scope="props">
          <el-button size="small" v-for="(item, index) in props.filterValues" :key="index" :label="item.text" :value="item.value" @click="handleFilter(props.column.id, item.value)">
            {{ item.text }}
          </el-button>
        </template>
      </el-table-column>
    </el-table-column>
    <!-- ... 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 数据源
      filterText: '',
      filterValues: [
        { value: 'all', text: '全部' },
        { value: 'male', text: '男' },
        { value: 'female', text: '女' } // 可自定义筛选值
      ]
    };
  },
  methods: {
    handleFilter(index, value) {
      this.tableData = this.tableData.filter(row => row[index] === value); // 根据筛选条件过滤数据
    }
  }
};
</script>

在这个例子中，当你在输入框输入内容并点击筛选按钮时，`handleFilter`方法会被触发，根据所选的筛选值更新表格的数据。