elementui table中表头筛选filters 把列中某些数据列为空的筛选出来
时间: 2025-06-29 09:21:19 浏览: 4
### 实现 ElementUI 表格中自定义筛选
为了实现在特定列中筛选出值为空的数据项,可以通过配置 `filters` 和 `filter-method` 属性来完成这一需求。下面展示具体的实现方法。
#### 定义过滤条件
在组件的 data 函数内定义用于筛选的数组对象,这里假设目标列为 "name" 列:
```javascript
data() {
return {
filterEmptyOption: [
{ text: '非空', value: true },
{ text: '为空', value: false }
]
};
}
```
此部分代码创建了一个名为 `filterEmptyOption` 的列表,其中包含了两个选项:“非空”代表不为空的状态;“为空”则表示该字段没有任何值[^1]。
#### 配置表格列属性
接着,在对应列 (例如 name) 上设置如下属性:
- 使用 `:filters="filterEmptyOption"` 来指定可用作筛选依据的选择项;
- 设置 `:filter-multiple="false"` 确保一次只能选择一种状态进行筛选;
- 添加 `:filter-method="handleFilter"` 方法名作为回调函数处理实际逻辑。
```html
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<!-- ... -->
<el-table-column
prop="age"
label="年龄"
:filters="filterEmptyOption"
:filter-multiple="false"
:filter-method="handleFilter"
/>
```
上述 HTML 片段展示了如何应用这些配置到 age 列上[^2]。
#### 编写筛选逻辑
最后一步是在 methods 对象里编写 handleFilter 函数的具体行为:
```javascript
methods: {
handleFilter(value, row, column) {
const property = column['property'];
if (!value && !row[property]) {
return true;
} else if (value === !!row[property]){
return true;
}
return false;
}
}
```
这段 JavaScript 代码实现了当用户选择了 “为空”的时候只显示那些相应单元格确实为空的行;反之亦然。注意这里的 `column['property']` 获取的是当前正在被操作的那一列的名字(即 prop 值),这使得同一个筛选器能够适用于不同列而无需重复编码。
阅读全文
相关推荐

















