antd Table组件 表格表头筛选查询，treeSelect 类型的筛选怎么加初始默认值

在Ant Design (antd) 的 Table 组件中，如果想添加一个 TreeSelect 类型的列用于表格头部筛选，并设置初始默认值，你可以这样做：

首先，你需要安装 Ant Design 提供的 `antd-pro-table` 或者直接使用原生的 `Table` 和 `TreeSelect` 组件。

1. 安装依赖：

   npm install @ant-design/pro-table

2. 使用 `pro-table` 中的 `Column` 和 `onFilter` 方法：

import { Table, TreeSelect } from 'antd';
import { Option } from 'antd-select';

// 假设你的数据结构包含一个字段叫 'category'，它是一个树形结构
const initialCategory = ['rootCategory']; // 初始默认筛选选项

function TreeNode({ key, title, children }) {
  return (
    <TreeSelectTreeNode key={key} title={title} value={key}>
      {children.map((child) => child)}
    </TreeSelectTreeNode>
  );
}

const options = [
  // 根据实际业务填充所有树节点
].map((item) => ({ value: item.id, label: item.name }));

const columns = [
  {
    title: '分类',
    dataIndex: 'category',
    width: 150,
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <TreeSelect
          ref={(ref) => (this.categoryFilterRef = ref)}
          placeholder="请选择分类"
          allowClear
          value={selectedKeys}
          onChange={(newValue) => setSelectedKeys(newValue)}
          treeData={options}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        />
        <a onClick={() => confirm()} style={{ marginTop: 8 }}>
          确定
        </a>
        <a onClick={() => clearFilters()} style={{ marginTop: 8 }}>
          取消
        </a>
      </div>
    ),
    onFilter: (value, record) =>
      record.category.includes(value), // 检查当前行是否包含筛选关键词
    filters: [{ text: '', value: '' }],
    filterMultiple: false, // 设置单选模式
  },
  // ...其他列配置...
];

const data = ...; // 数据源

<Table columns={columns} dataSource={data} />;

在这个例子中，我们在表头的 `filterDropdown` 属性里创建了一个 `TreeSelect` 控件，并在 `onChange` 事件中更新筛选状态。同时，`onFilter` 函数用于处理搜索逻辑，`filters` 属性设置了初始筛选项。