Teek Design Vue3

主题

Teeker2025-07-21
750
2.9m

表格筛选 ​

表格筛选会给每一个表头添加表单，填写表单后，会对表头所在的列进行数据筛选，支持多列。

表格筛选是基于 ProForm 超级表单 进行拓展，它比 ElTable 自带的更加强大，每一个表格列配置项 column.filterProps.formColumn 等于 ProFormItem 的 Props。

通过 filterProps.el 配置项，可以传入编辑表单的组件，通过 filterProps.elProps 可以给编辑表单的组件传入 Props，更多 filterProps 的功能可以先去了解 ProForm 超级表单 超级表单的配置。

表格工具的列配置按钮可以对筛选功能控制开关。

基础使用 ​

在单列 column 使用 filter 配置项来开启表格筛选功能，默认的表单是 ElInput，可以通过 filterProps.el 配置项来修改表单类型。

ElInput 表单输入的值默认是字符串，如果需要转为数字，可以传递 modelModifiers 到 ElInput 组件中，具体情况 progress 列的配置。

筛选规则 ​

默认筛选的规则是 eq 精准匹配，可以通过 filterProps.rule 配置项来修改筛选规则。

规则如下：

  • lt：小于
  • gt：大于
  • le：小于等于
  • ge：大于等于
  • eq：精准匹配
  • ne：不等于
  • like：模糊匹配
  • notLike：不等于模糊匹配
  • between：区间
  • notBetween：区间外
  • in：在
  • notIn：不在

自定义筛选规则 ​

当内置的规则无法满足时，可以使用自定义筛选规则。

通过设置 rule 为函数来开启自定义规则，函数有 3 个参数：

  • model：当前所有筛选参数
  • row：当前行数据
  • key：当前触发筛选的 prop

可以通过 model[key] 拿到当前输入的值，通过 row[key] 拿到要筛选的数据，函数最终需要返回 true 或 false，true 代表符合筛选条件，false 代表不符合过滤条件。

options 字典 ​

默认 options 是读取单列 column.options 作为下拉选项，但是我们可以定义一个新的 options 字典，来覆盖单列 column.options。

弹出框配置 ​

通过 popoverProps 来配置 ElPopover 组件的 Props 属性。

后端筛选 ​

通过 filterScope 配置为 server 模式，来阻止前端筛选，默认是 client 模式，即前端筛选。

filterScope 为 server 模式代表后端筛选，您需要实现 filter 方法，然后修改传入表格的数据来达到筛选效果（等价于搜索）。

如果是通过传入 request-api 配置项，则会调用 request-api 方法来重写获取数据，方法参数为筛选参数。

自定义筛选图标 ​

通过 filter-icon 插槽，可以自定义筛选图标。

自定义按钮插槽 ​

通过 filter-button 插槽，可以自定义表格筛选的操作按钮。