如何使用 Math.random() 在 JavaScript 中生成随机数

实现背景

由于在项目中需要实现这样一个需求：”对表格列表的某一列进行筛选，包括利用输入搜索、多选实现表格数据的过滤筛选“，由于antd的Table组件可以通过filterDropdown属性实现自定义筛选菜单，该属性类型为ReactNode | (props: FilterDropdownProps) => ReactNode，该函数负责渲染图层，需要开发人员自行编写各种交互，这恰好能够满足我们这个需求。

分析实现

分析需求可得到，该自定义筛选菜单包括：

• 头部区域的输入框，该输入框主要负责实现多选框的过滤筛选
• 中间区域的多选框内容，该部分主要负责渲染当前列column的数据数组，以便后续实现表格column的数据筛选
• 底部区域的操作按钮，包括全选checkbox、重置按钮和确定筛选按钮 点击table某一列的header内的搜索过滤图标，弹出的筛选弹框大致效果图如下所示：

首先来熟悉一下涉及到表格列筛选的属性api：

• filterDropdown:自定义筛选菜单
• filtered:标识数据是否经过过滤，筛选状态时，column的header筛选图标会高亮
• filterIcon:自定义filter图标
• filterMultiple: 是否可以多选，默认为true
• filterMode: 指定筛选菜单的用户界面,可选’menu’或’tree’，默认’menu’
• filters: 表头的筛选菜单项，这是实现筛选框多选的重要属性

自定义筛选菜单的实现

首先编写自定义筛选菜单，本文使用(props: FilterDropdownProps) => ReactNode函数来定义filterDropdown属性的值。代码如下： 首先定义接口，主要涉及到表头筛选菜单项类型