新手使用~React+Antd^4.1.3+Hooks自定义筛选框

官网此版本的筛选组件为：

根据可爱的pm的要求，需要添加全选、确认筛选、重置按钮。
此情景适用于后端所需要的的参数传递为多选，[] 数组的形式，而非单个字符串。

引入需要的组件及包

import { Table, Button, Checkbox, Space} from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { useDispatch,  Dispatch,} from 'umi';

import styles from "./index.less"

声明所需变量 ***

 const dispatch = useDispatch<Dispatch>();

 const [ tableData, setTableData ] = useState<any>(null); // 表格数据
 const [ indeterminate, setIndeterminate ] = useState(false); // 控制是否全选展示样式为方块
 const [ checkAll, setCheckAll ] = useState<any>(null); // 是否全选
 
 const pageOption = useRef<any>({ page: 1, size: 10 }); // 分页
 const filterOption = useRef<any>();//筛选的条件

Table 组件

<Table
  rowKey={record => record.id} // 必须的rowkey 指向的参数要存在
  dataSource={loading ? [] : tableData} //表格数据
  columns={columns} //表头数据
  loading={loading} // loading 状态
  pagination={paginationProps} //分页
  // rowClassName={getRowClassName} 单双行不同颜色控制 函数放在下面 需要的自取
/>


function getRowClassName(record: any, index: number) {
  let className = '';
  className = index % 2 === 0 ? styles['odd-Row'] : styles['even-Row'];
  return className;
}

自定义筛选组件

 const getFilterProps = (dataIndex:any,plainOptions:any)=>({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }:any) => (
      <div className={styles["filter-content"]}>
        <Checkbox
          onChange={(e)=>onCheckAllChange(e,setSelectedKeys,plainOptions)}
          checked={checkAll}
          className={styles['checkbox-wrap-my']}
          defaultChecked={false}
          indeterminate={indeterminate}
        >
         全选
        </Checkbox>
        <Checkbox.Group
          value={selectedKeys}
          options={plainOptions}
          onChange={value => onChange(setSelectedKeys,value,plainOptions)}
          className={styles['ant-checkbox-group-my']}
        />

        <Space className={styles['ant-space-div']}>
          <Button
            size="small"
            onClick={() =>filter(dataIndex,clearFilters,selectedKeys)}
          >
            Filter
          </Button>

          <Button
            onClick={() => handleReset(clearFilters)}
            size="small"
          >
            reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: <Icon component={xxx} />,
    // icon用的公司ui给的 就不方便贴了 可以根据自己的需求改成Antd的icon或者自己的Icon哦~
  })

对应的筛选框的样式 可能会有缺失 对应不上的 按照需求自己改好就可以啦 ~ 我这里使用的是模块的css 没有使用的同学请自行转换

.ant-checkbox-group-my{
  display: flex ;
  flex-direction: column ;
  :global{
    .ant-checkbox-group-item{
      margin-bottom: 10px;
    }
  }
}

.ant-space-div{
  margin-top: 10px;
}

.checkbox-wrap-my{
  margin-bottom: 10px;
}

.filter-content{
  padding: 8px;
}

对应事件

// 重置
function handleReset(clearFilters:any){
    setIndeterminate(false);
    setCheckAll(false);
    clearFilters()
    filterOption.current = {
      filterText:'',
      filterValue:[]
    }
    onSearch()
 }

// 筛选
function filter(dataIndex:any,clearFilters:any,selectedKeys:any){
    filterOption.current = {
      filterText:dataIndex,
      filterValue:selectedKeys
    }
    onSearch()
}

// 多选改变
function onChange (setSelectedKeys:any,list:any,plainOptions:any)  {
    setSelectedKeys(list)
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
};

//全选改变
function onCheckAllChange (e:any,setSelectedKeys:any,plainOptions:any)  {
    setSelectedKeys(e.target.checked ? map(plainOptions,(item)=>{return item?.value}) : [])
    setIndeterminate(false);
    setCheckAll(e.target.checked);
};

function onSearch(){
const data = {[filterOption.current?.filterText]:filterOption.current?.filterValue}
}
// 因为还有别的筛选条件以及兼容初始筛选条件为空的情况 我统一做了查空
 let newData:any = {}
    forIn(data,(value,key)=>{
      if(value){
        newData[key] = value
      }
    })
// 此时的newData就是要做请求的data啦~ 

更多Antd配置请查阅Antd官网
欢迎指正~