Antd相关 Table表格自定义筛选以及统一清空筛选项

源于一直负责的组件库需求，对Antd表格组件进行了二次封装，简化了很多功能配置项(分页、排序、筛选、样式等)，其中对多个列筛选进行统一清空功能遇到了不少坑，记录一下……
重点是合理使用filteredValue属性。

其中，用到的对象类型判断方法，详见《JavaScript中Object对象类型判断》；

const MyTable = ({

  ......

  // 1.定义全局状态，用来存放各列的 filteredValue 状态
  const [filteredValues, set_filteredValues] = useState();

  // 2.定义通用 columns 筛选属性配置方法
  const getColumnSearchProps = (dataIndex) => {
    const filterIcon = (filtered) => {
      // 筛选前后图标样式定义
    }
    const filterDropdown = ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters
    }) => {
      let input = (
        <Input
          placeholder="检索文本内容..."
          value={selectedKeys && selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => confirm()}
          style={{ width: 200 }}
          {...props}
        />
      )
      // 自定义筛选最方便的是可以随意定义 input，比如 TreeSelect、Cascader、RangePicker 等等
      // 注意合理使用 selectedKeys 和 setSelectedKeys，setSelectedKeys 设置的状态值必须为 array
      return (
        <Space style={{ padding: 8 }}>
          {input}
          <Button sc_oper="query" onClick={confirm} />
          <Button sc_oper="reset" onClick={clearFilters} />
        </Space>
      );
    }
    const onFilter= (filterValue, record) => {
        // 筛选逻辑会循环遍历 selectedKeys 执行每个筛选条件 filterValue 和每行数据 record，也可以暴露出去
    };
    // 如果 dataIndex 是数组，需要转成字符串
    let key = dataIndex;
    if (isArray(dataIndex)) key = dataIndex.join("."); 
    return {
      // 重点：通过 filteredValues 控制筛选条件
      filteredValue: filteredValues && filteredValues[key],
      filterDropdown,
      filterIcon,
      onFilter,
    }
  }

  // 3.通过表格 onChange 事件，将 filters 赋值给 filteredValues
  const onChange = (pagination, filters, sorter, extra) => {
    set_filteredValues(filters);
  }
  
  // 4.使用，注意依赖项数组
  const columns = useMemo(() => ([
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      ...getColumnSearchProps('name'), // 使用
    },
    {
      title: 'Age',
      dataIndex: ['info', 'age'],
      key: 'age',
      ...getColumnSearchProps(['info', 'age']), // 使用，数组形式在 filteredValues 关键字会被存为 'info.age'
    }
  ]), [filteredValues])

  ......

  // 5.统一清空筛选项
  const clearFilters = () => {
    // 注意一定要赋值每个列筛选项为空数组
    // 如果直接给 filteredValues 设置 null 或者 undefined，并不会重置筛选项，此乃大坑
    for (let c in filteredValues) filteredValues[c] = [];
    set_filteredValues({ ...filteredValues });
  }
  
  ......
  
  return <Table columns={columns} onChange={onChange} dataSource={data} />;
}