Ant Design of React 之 Table 的自定义筛选

文档地址：https://ant.design/components/table-cn/

在antd文档中有相关介绍可以发现筛选项的配置在表格的列配置（columns）中实现，相关文档如下

 可以发现主要由filterDropdown属性画自定义内容，代码参考：

　/**
   * 筛选项
   */
  const filterList=[
    { text: '1', value: '1',ischecked:true },
    { text: '2', value: '2', ischecked:true },
    { text: '3', value: '3' ,ischecked:true},
  ];
 
  const [filterCon,setFilterCon] = useState<any>(); // 确定筛选
  const [filterIsChecked,setFilterIsChecked] = useState<any>(filterList); // 筛选项
  const [filtered,setFiltered] = useState<boolean>(false); // 筛选项是否高亮
  const [filterDropdownVisible,setFilterDropdownVisible] = useState<boolean>(false); // 筛选项下拉
 /**
   * 筛选选中
   * @param e 
   * @param text 
   */
  const handleChangeCheckbox = (e:any,text:any,index:any) => {
    let newfilter:any=[...filterIsChecked];
    newfilter[index].ischecked=e.target.checked;
    setFilterIsChecked(newfilter);
  }

  /**
   * 筛选重置事件
   */
  const handleReset = () => {
    let newfilter:any=[...filterIsChecked];
    newfilter.forEach((item:any) => {
      item.ischecked=true;
    });
    setFiltered(false);
    setFilterIsChecked(newfilter);
    setFilterCon([]);
  }

  /**
   * 筛选确定事件
   */
  const handleSearch = () => {
    setFiltered(true);
    let newfilter:any=[...filterIsChecked];
    let checked:any = [];
    newfilter.forEach((item:any) => {
      if(item.ischecked){
        checked.push(item.text);
      }
    });
    setFilterCon(checked);
    setFilterDropdownVisible(false);
  }

　　

//列配置项
{
      title:'分类',
      dataIndex:'indexCategory',
      filterDropdown:() => (
      <div style={{ padding: 8 }}>
        <div className={styles.filterList}>
          {filterIsChecked.map((item:any,index:any) => //筛选项循环
            <div key={item.value} className={styles.filterItem}>
              <Checkbox onChange={(e) => handleChangeCheckbox(e,item.text,index)} checked={item.ischecked}>{item.text}</Checkbox>
             </div>
          )}
        </div>
        <Space>
        <Button 
          onClick={() => handleReset()} 
          size="small"
           >
            重置
          </Button>
          <Button
            type="primary"
            onClick={() => handleSearch()}
            size="small"
          >
            确定
          </Button>
         
        </Space>
      </div>
    ),
    filterDropdownVisible:filterDropdownVisible,
    filterIcon: () => <FilterFilled style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilterDropdownVisibleChange:(visible:any) => { //是否显示筛选框
      if(visible){
        setFilterDropdownVisible(true);
      }else{
        setFilterDropdownVisible(false);
      }
    }
    },