Antd 表格列添加可控筛选框，页面滑动筛选框不随表头分离解决方案

要解决antd表格列添加可控的筛选框，同时页面滑动筛选框不随表头分离的问题，你可以尝试以下步骤：\n\n1. 使用fixed属性设置表头固定在页面顶部，这样滑动时，表头会保持在可见范围内。\njsx\n<Table\n columns={columns}\n dataSource={data}\n scroll={{ y: 400 }}\n pagination={false}\n sticky\n/>\n\n\n2. 使用fixed属性设置需要添加筛选框的列为固定宽度。\njsx\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 200,\n fixed: 'left',\n ...yourFilterProps, // 添加筛选框的属性\n },\n // 其他列配置\n];\n\n\n3. 使用filterDropdown和filterIcon属性自定义筛选框和筛选图标。\njsx\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 200,\n fixed: 'left',\n filterDropdown: ({ setSelectedKeys, 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 <Space>\n <Button\n type="primary"\n onClick={confirm}\n icon={<SearchOutlined />}\n size="small"\n style={{ width: 90 }}\n >\n Search\n </Button>\n <Button onClick={clearFilters} size="small" style={{ width: 90 }}>\n Reset\n </Button>\n </Space>\n </div>\n ),\n filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,\n },\n // 其他列配置\n];\n\n\n通过以上步骤，你可以将可控的筛选框添加到antd表格列中，并且保持在页面滑动时不会与表头分离。