react antd table 自定义筛选UI demo

{
      title: tn('project.viewer.处理'),
      dataIndex: 'status',
      width: 90,
      // filters: ProcessStatusFilterList,
      // filterMode: 'tree',
      // filteredValue: process_status_filteredValue,
      filterIcon: () => (
        <FilterFilled
          style={{ color: process_status_filteredValue?.length ? '#009EE1' : undefined }}
          rev={undefined}
        />
      ),
      filterDropdown: (filterProps: AntTreeNodeProps) => (
        <div className="process-filter-dropdown" onKeyDown={(e) => e.stopPropagation()}>
          <Tree
            blockNode
            checkable
            switcherIcon={<div></div>}
            expandedKeys={[processFilterTreeData?.[0]?.key]}
            checkedKeys={process_status_filteredTemp}
            onCheck={(checkedKeys: ClashDetectiveHandleItemDtoOperationEnum[]) => {
              const _process_status_filteredTemp = checkedKeys?.filter((itKey) =>
                ProcessStatusFilterList.some((it) => it.value === itKey),
              );
              setState((st) => {
                st.process_status_filteredTemp = _process_status_filteredTemp;
              });
            }}
            treeData={processFilterTreeData}
          />
          <Divider style={{ margin: '5px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Button
              type="link"
              size="small"
              disabled={!process_status_filteredTemp?.length}
              onClick={() => {
                setState((st) => {
                  st.process_status_filteredTemp = [];
                });
              }}
            >
              {tn('project.viewer.重置')}
            </Button>
            <Button
              type="primary"
              size="small"
              onClick={() => {
                setState((st) => {
                  st.process_status_filteredValue = process_status_filteredTemp;
                });
                filterProps?.confirm?.();
              }}
            >
              {tn('project.viewer.确定')}
            </Button>
          </div>
        </div>
      ),
      render: (value, record) => {
        return (
          <div className="clash-site-action">
           xxx
          </div>
        );
      },
    },