React：Antd中Table表格实现自定义筛选

1.项目需求

    产品需求是通过点击表头旁边的图标，出现下拉菜单，进行选择，实现对Table中数据的筛选。

2.发现问题

    通过在Antd中对Table组件调研，可以看到，Table组件已经实现了该功能：

                        

 但是和我们预期的还有点差异：

    1，下拉后，通过单选或者单选，然后点击确定后进行筛选。产品需求是需要点击时就要进行筛选，就像Select下拉框一样

    2，查看代码后发现，当点击确定后，调用的是onFilter函数，在API中对该函数的描述是：

     

这个api是对我们本地的数据进项筛选，我们工作中实际的需求是应在选择后，将选择的参数传递给后端，后端再返回我们想要的数据。

3.解决方案

通过对文档的阅读，找到了一个可以实现我们需求的API：

通过自定义筛选列表，从而实现需求

4.实现过程

封装CheckFilterDropdown组件，（下拉框）

import React, { useEffect, useRef, useState } from "react";
import styles from "./index.less";


const CheckFilterDropdown = (props: any) => {
  // selectList:下拉框中所筛选的list
  // selectedKeys ： 当前所选择的item
  // setSelectedKeys: 当点击后调用的onchange。
  // confirm ： 注意：这个不是JS原生的confirm方法，是Table中props中解构的，用于提交事件，我这里作为点击后隐藏下拉框处理

  
  const { selectList, selectedKeys, onChange, confirm } = props;

  const onClick = (id: any) => {
    onChange(id, confirm);
  };

  return (
    <div>
      {selectList.map((item: any, index: any) => (
        <div
          key={index}
          //这里是对当前选择的item加背景色。
          className={
            item.id == selectedKeys
              ? styles.selectItemCurrent
              : styles.selectItem
          }
          onClick={() => onClick(item.id)}
        >
          {item.value}
        </div>
      ))}
    </div>
  );
};

export default CheckFilterDropdown;

在Table中使用

const MyTable = ()=>{
    //当前筛选的数据
    const [selectedKeys, setSelectedKeys] = useState(0);
    //点击切换时处罚的函数
    const onChange = (id,fn)=>{
        setSelectedKeys();
        fn();
       // 发送请求函数
    }
    const columns =[
    {
      title: "是否正常",
      dataIndex: "isNomarl",
      width: 150,
      align: "center",
      //此处为自定义筛选列表
      filterDropdown: (props: any) => (
        <CheckFilterDropdown
          //这个props可自行查阅文档，传入这个props是因为我们需要props中的confirm方法。
          {...props}
          selectList={[
            { id: 0, value: "全部" },
            { id: 1, value: "正常" },
            { id: 2, value: "异常" },
          ]}
          selectedKeys={selectedKeys}
          onChange={onChange}
        />
      ),
      render: (text: number, record: any) => {
        return (
          <span >{record.sex}</span>
        );
      },
    },

    ]

    
    return (
      <Table
        //其他属性已经省略
        columns={columns}
      ></Table>
    )
}

4.效果：

    已实现：当点击时，发送请求，并且弹窗消失。