element-plus 表格 tableData 按照某一列 表头筛选 代码
时间: 2023-07-18 19:24:50 浏览: 58
您可以使用 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()` 来进行模糊匹配,返回符合条件的数据。
您可以根据实际需要修改筛选方法和筛选项。需要注意的是,当表格数据数量较大时,使用筛选功能可能会影响性能。