您可以使用 element-plus
表格组件的 `filter-method` 属性来实现按照某
一列表头筛选的功能。`filter-method` 属性接受一个函数作为参数，该函数会在
表格组件渲染时自动调用。您可以在这个函数
中自定义筛选方法，根据需要返回符合条件的数据。
以下是一个示例代码，演示如何按照某
一列表头筛选
表格数据：
```html
<template>
<div>
<el-input v-model="filterKey" placeholder="请输入关键字"></el-input>
<el-
table :data="
tableData" :column-filter-method="filterHandler">
<el-
table-column prop="name" label="姓名" :filters="nameFilters"></el-
table-column>
<el-
table-column prop="age" label="年龄" :filters="ageFilters"></el-
table-column>
<el-
table-column prop="gender" label="性别" :filters="genderFilters"></el-
table-column>
</el-
table>
</div>
</template>
<script>
export default {
data() {
return {
filterKey: '',
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
],
nameFilters: [
{ text: '张三', value: '张三' },
{ text: '李四', value: '李四' },
{ text: '王五', value: '王五' }
],
ageFilters: [
{ text: '18', value: 18 },
{ text: '20', value: 20 },
{ text: '22', value: 22 }
],
genderFilters: [
{ text: '男', value: '男' },
{ text: '女', value: '女' }
]
}
},
methods: {
filterHandler(value, row, column) {
const property = column.property;
return row[property].indexOf(value) > -1;
}
}
}
</script>
```
在上面的代码
中，我们使用了 `column-filter-method` 属性来指定筛选方法。在 `el-
table-column` 组件
中，我们使用了 `filters` 属性来指定筛选项。在 `filterHandler` 方法
中，我们根据当前列的属性名来
获取当前列的
值，然后使用
JavaScript 的字符串方法 `indexOf()` 来进行模糊匹配，返回符合条件的数据。
您可以根据实际需要
修改筛选方法和筛选项。需要注意的是，当
表格数据数量较大时，使用筛选功能可能会影响性能。
3784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
