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);
      }
    }
    },