在前端开发中，表格是展示数据的常见组件，而表格的筛选功能能够帮助用户快速定位到所需的数据。本文将详细介绍如何基于 Element UI 实现一个带有筛选功能的表格，包括主要代码逻辑、表格封装、表格列添加、popover 组件的使用以及下拉数据的处理。
功能概述
我们要实现的功能是在一个el-table中添加筛选功能，用户可以通过点击筛选图标展开一个弹出框，在弹出框中选择需要筛选的选项，表格会根据用户的选择实时更新显示的数据。
主要代码逻辑
筛选相关的方法
export default {
data() {
return {
selectedNames: [], // 存储用户选择的筛选选项
filterVisible: {
fundPayTypeNames: false // 控制筛选弹出框的显示与隐藏
}
};
},
methods: {
// 当筛选条件改变时调用，清空已选择的筛选选项
filterChange(v) {
this.selectedNames = [];
},
// 切换筛选弹出框的显示状态
toggleFilter(column) {
this.filterVisible[column] = !this.filterVisible[column];
},
// 筛选方法，根据用户选择的选项过滤表格数据
filterName(value, row) {
this.selectedNames.push(value);
return (
this.selectedNames.length === 0 ||
this.selectedNames.includes(row.fundPayTypeNames)
);
}
}
};
- filterChange方法：在筛选条件改变时调用，将selectedNames数组清空，以便重新记录用户的选择。
- toggleFilter方法：通过切换filterVisible对象中对应列的布尔值，控制筛选弹出框的显示与隐藏。
- filterName方法：根据用户选择的筛选选项，判断当前行是否应该显示在表格中。如果selectedNames数组为空，则显示所有行；否则，只显示fundPayTypeNames字段值在selectedNames数组中的行。
封装的el - table部分
<el-table
ref="pf - table"
v - bind="$attrs"
:data="data"
:border="border"
:default - sort="defaultSort"
:height="height"
style="width: 100%"
:highlight - current - row="highlightCurrentRow"
:summary - method="getSummaries"
:header - cell - style="headerCellStyle"
v - on="$listeners"
@row - click="rowClick"
@row - dblclick="rowDblclick"
@selection - change="handleSelectionChange"
@sort - change="sortChangeEvent"
@expand - change="expandChange"
@filter - change="filterChange"
>
<!-- 表格列 -->
</el - table>
在el - table组件中，我们绑定了一系列的属性和事件。其中，@filter - change="filterChange"用于监听筛选条件的改变事件，并调用filterChange方法进行处理。
添加表格列部分
<el - table - column
v - if="item.customSort"
:key="item.type"
:label="item.label || ''"
:width="item.width || ''"
:filters="options"
filter - placement="bottom - end"
:filter - method="filterName"
:align="item.align || 'center'"
filter - multiple
>
<template slot="header">
<span>{{ item.label }}</span>
<!-- 筛选图标 -->
<i
class="el - icon - data - analysis"
@click="toggleFilter('fundPayTypeNames')"
/>
</template>
<template slot - scope="scope">
<span>{{ scope.row[item.prop] }}</span>
</template>
</el - table - column>
- :filters="options"：指定筛选选项，options是一个计算属性，用于生成筛选选项列表。
- :filter - method="filterName"：指定筛选方法，当用户选择筛选选项时，会调用filterName方法进行数据过滤。
- filter - multiple：允许用户选择多个筛选选项。
- 在表头模板中，添加了一个筛选图标，点击该图标会调用toggleFilter方法，显示或隐藏筛选弹出框。
表格之外加上popover
<el - popover
placement="bottom - end"
:visible.sync="filterVisible.fundPayTypeNames"
width="200"
trigger="manual"
>
<template slot="content">
<el - checkbox - group v - model="selectedNames">
<el - checkbox
v - for="filter in options"
:key="filter.value"
:label="filter.value"
:value="filter.value"
>
{{ filter.text }}
</el - checkbox>
</el - checkbox - group>
</template>
<template slot="reference">
<!-- 这里可以留空 -->
</template>
</el - popover>
- :visible.sync="filterVisible.fundPayTypeNames"：通过sync修饰符实现弹出框显示状态的双向绑定，与toggleFilter方法配合使用。
- 在弹出框内容模板中，使用el - checkbox - group和el - checkbox组件创建复选框列表，用户可以通过勾选复选框来选择筛选选项。
下拉数据取当前表格列
computed: {
sectionHeight() {
if (this.height === '100%' && this.havePagination) {
return 'have - pagination - height';
} else if (this.height === 'auto') {
return 'height - auto';
} else {
return 'height - 100';
}
},
options() {
if (this.data && this.data.length) {
const result = [];
this.data.map((item) => {
if (!result.includes(item.fundPayTypeNames)) {
result.push(item.fundPayTypeNames);
}
});
return result.map((item) => {
return {
text: item,
value: item
};
});
} else {
return [];
}
}
};
- sectionHeight计算属性：根据表格的高度和是否有分页，返回不同的类名，用于样式控制。
- options计算属性：从表格数据中提取fundPayTypeNames字段的唯一值，并将其转换为{text, value}格式的对象数组，作为筛选选项列表。
