Ant Design Table：如何解决隐藏列后设置的 width 仍生效问题

可以使用自定义筛选器来实现隐藏列后设置的width仍然生效。\n\n首先，在Table组件中设置列的筛选器属性filterDropdown和onFilterDropdownVisibleChange，并定义一个状态visibleColumns来保存可见的列。\n\njavascript\nimport React, { useState } from 'react';\nimport { Table, Button } from 'antd';\n\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 200,\n filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (\n <div style={{ padding: 8 }}>\n <Button\n type="primary"\n onClick={() => {\n confirm();\n }}\n size="small"\n style={{ marginRight: 8 }}\n >\n 确定\n </Button>\n <Button onClick={clearFilters} size="small">\n 重置\n </Button>\n </div>\n ),\n onFilterDropdownVisibleChange: (visible) => {\n if (!visible) {\n setColumns(\n columns.map((col) =>\n col.dataIndex === 'name'\n ? { ...col, width: 100 } // 设置隐藏列的宽度\n : col\n )\n );\n }\n },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 200,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n width: 200,\n },\n];\n\nconst data = [\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 key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n];\n\nconst ExampleTable = () => {\n const [visibleColumns, setVisibleColumns] = useState(columns);\n\n return (\n <Table\n columns={visibleColumns}\n dataSource={data}\n pagination={false}\n onHeaderRow={() => ({\n style: { background: '#f5f5f5' },\n })}\n />\n );\n};\n\nexport default ExampleTable;\n\n\n在onFilterDropdownVisibleChange的回调函数中，当筛选器关闭时，设置隐藏列的宽度为100。这样即使隐藏了列，再次打开时，宽度仍然是设置的100。\n\n通过这种方式，可以确保隐藏列以后设置的width仍然生效。