表格数据筛选新方式：Vue3 Antd实现Table表头自定义过滤

2023-10-13 20:52:14

使用 Vue3 Antd Table 实现自定义表头过滤：提升您的数据管理效率

简介

在现代应用程序开发中，高效处理大量数据至关重要。表格是组织和显示此类数据的一种常用方法，而 Vue3 Antd 是一个流行的前端框架，提供了强大的 Table 组件。它允许开发人员轻松创建交互式和可过滤的表格，满足各种数据管理需求。本文将深入探讨 Vue3 Antd Table 的自定义过滤功能，提供详细的示例并解决常见问题。

一、filters 属性：自定义过滤的基石

Vue3 Antd Table 组件的 filters 属性是自定义过滤的关键。它允许为表格中的每列指定一个或多个筛选器。筛选器可以是函数、组件或字符串。

二、实例详解：实现常见过滤场景

基本筛选： 使用字符串筛选器过滤单个值。例如，以下代码为 "姓名" 列创建两个基本筛选器：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    filters: [
      {
        text: '张三',
        value: 'zhangsan',
      },
      {
        text: '李四',
        value: 'lisi',
      },
    ],
  },
];

范围筛选： 使用数组筛选器过滤值范围。例如，以下代码为 "年龄" 列创建两个范围筛选器：

const columns = [
  {
    title: '年龄',
    dataIndex: 'age',
    filters: [
      {
        text: '18-25岁',
        value: [18, 25],
      },
      {
        text: '26-35岁',
        value: [26, 35],
      },
    ],
  },
];

自定义筛选器： 创建复杂的筛选逻辑。例如，以下代码为 "性别" 列创建自定义筛选器，允许用户通过下拉菜单选择性别：

const columns = [
  {
    title: '性别',
    dataIndex: 'gender',
    filters: [
      {
        text: '男',
        value: 'male',
      },
      {
        text: '女',
        value: 'female',
      },
    ],
    customFilterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div>
        <Radio.Group value={selectedKeys} onChange={(e) => setSelectedKeys(e.target.value)}>
          <Radio value="male">男</Radio>
          <Radio value="female">女</Radio>
        </Radio.Group>
        <Button onClick={confirm} size="small" type="primary">确定</Button>
        <Button onClick={clearFilters} size="small" type="primary">清除</Button>
      </div>
    ),
  },
];