El-table 多条件筛选如何实现？

Question

在使用 Element UI 的 El-table 组件开发数据展示功能时，如何实现基于多个字段的动态筛选功能？常见问题包括：如何结合 filter-method 自定义筛选逻辑、如何联动多个筛选条件、如何处理异步加载数据后的筛选更新等。

Answer 1

一、基础概念：Element UI 的 El-table 筛选机制

在 Element UI 中，El-table 组件提供了原生的筛选功能，通过 column 的 filters 和 filter-method 属性可以实现对某一列数据的筛选。

• filters：用于定义该列可用的筛选项，通常是一个数组对象。
• filter-method：自定义筛选逻辑函数，接收一个参数（当前行数据）并返回布尔值决定是否显示该行。

例如：

    <el-table-column
      prop="name"
      label="姓名"
      :filters="[{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }]"
      :filter-method="filterName"
    />
  

二、进阶实践：如何结合 filter-method 实现多个字段动态筛选

为了支持多字段联动筛选，需要将各个筛选条件统一管理，并在 filter-method 中进行组合判断。

示例代码如下：

    data() {
      return {
        filters: {
          name: '',
          age: '',
          gender: ''
        }
      };
    },
    methods: {
      customFilter(row) {
        const { name, age, gender } = this.filters;
        return (
          (name === '' || row.name.includes(name)) &&
          (age === '' || row.age >= parseInt(age)) &&
          (gender === '' || row.gender === gender)
        );
      }
    }
  

在这个方法中，我们通过 customFilter 方法来综合判断所有字段的筛选条件是否满足。

三、高级技巧：多条件联动与交互设计

为了提升用户体验，通常会在表格上方添加独立的输入控件，如 el-input 或 el-select 来收集筛选条件，并绑定到统一的数据结构中。

字段名	组件类型	作用
姓名	el-input	模糊匹配姓名字段
性别	el-select	下拉选择性别
年龄	el-input-number	输入最小年龄

当这些控件的值发生变化时，触发筛选更新：

    watch: {
      filters: {
        handler() {
          this.$refs.table.doLayout(); // 强制刷新布局
        },
        deep: true
      }
    }
  

四、异步处理：加载远程数据后的筛选更新问题

在使用分页或懒加载等异步场景时，数据并非一次性全部加载完成。此时，本地的筛选逻辑可能无法正确应用。

解决方案包括：

1. 在后端接口中集成筛选参数，由服务端完成过滤。
2. 在前端缓存所有已加载数据，并在每次筛选时重新执行过滤逻辑。
3. 使用虚拟滚动技术提高大数据量下的性能表现。

流程图如下所示：

graph TD
      A[用户设置筛选条件] --> B{是否启用服务端筛选?}
      B -->|是| C[发送请求至服务端]
      B -->|否| D[本地缓存数据进行筛选]
      C --> E[获取新数据并渲染表格]
      D --> F[更新 table 数据源]

五、优化建议与最佳实践总结

以下是一些推荐的最佳实践：

• 使用 Vue 的响应式特性管理筛选状态，确保视图同步更新。
• 为每个筛选字段提供清除按钮，避免误操作导致结果为空。
• 对于复杂查询，可引入类似 Vuex 的状态管理模式。
• 考虑使用节流/防抖机制防止频繁触发筛选。
• 合理使用 computed 属性提升性能，避免重复计算。