Ant Design 表格列添加可控筛选框并与表头分离

要实现antd表格列添加可控的筛选框，并将筛选框与表头分离，可以按照以下步骤进行：\n\n1. 首先，需要在表格组件中定义一个状态，用于保存筛选框的值，例如 `filterValue`。\n2. 在表格列的 `filterDropdown` 属性中，渲染一个可控的筛选框组件，将筛选框的值设置为 `filterValue`，并通过 `onChange` 事件更新 `filterValue` 的值。\n3. 在筛选框组件的 `onChange` 事件中，将新的筛选值传递给表格组件，可以通过 `onFilter` 属性来实现。\n4. 在表格组件的 `onFilter` 事件中，更新筛选后的数据，并更新 `filterValue` 的值。\n5. 将筛选框与表头分离，可以将筛选框组件放在表格上方的某个位置，例如表格的 `title` 属性中。\n\n下面是一个示例代码，演示如何实现可控的筛选框与表头分离：\n\njsx\nimport React, { useState } from 'react';\nimport { Table, Input, Button } from 'antd';\n\nconst dataSource = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n // ...\n];\n\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (\n <div style={{ padding: 8 }}>\n <Input\n placeholder="Search name"\n value={selectedKeys[0]}\n onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}\n onPressEnter={confirm}\n style={{ width: 188, marginBottom: 8, display: 'block' }}\n />\n <Button\n type="primary"\n onClick={confirm}\n size="small"\n style={{ width: 90, marginRight: 8 }}\n >\n Search\n </Button>\n <Button onClick={clearFilters} size="small" style={{ width: 90 }}>\n Reset\n </Button>\n </div>\n ),\n onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),\n },\n // ...\n];\n\nconst App = () => {\n const [filterValue, setFilterValue] = useState('');\n\n const handleFilter = (value) => {\n // 更新筛选后的数据\n // 这里只是一个示例，实际应用中可能需要发送请求获取新的数据\n const filteredData = dataSource.filter((record) =>\n record.name.toLowerCase().includes(value.toLowerCase())\n );\n\n // 更新筛选框的值\n setFilterValue(value);\n\n // 更新数据源\n // 这里只是一个示例，实际应用中可能需要使用setState或其他状态管理工具来更新数据源\n // 或者将filteredData保存到另一个状态中，并在表格的dataSource中使用该状态\n dataSource = filteredData;\n };\n\n return (\n <div>\n <Input.Search\n placeholder="Search name"\n value={filterValue}\n onChange={(e) => setFilterValue(e.target.value)}\n onSearch={handleFilter}\n style={{ width: 200, marginBottom: 16 }}\n />\n <Table dataSource={dataSource} columns={columns} />\n </div>\n );\n};\n\nexport default App;\n\n\n在示例代码中，我们使用 `useState` 钩子来定义一个状态 `filterValue` ，用于保存筛选框的值。在 `handleFilter` 函数中，更新筛选框的值，并根据筛选条件更新表格的数据源。筛选框组件放置在表格上方的 `Input.Search` 中，通过 `onSearch` 事件来触发筛选操作。\n