Ant Design Table 隐藏列后宽度问题解决方法

在 Ant Design Table 中，隐藏列后，列的宽度仍然会生效。这是因为隐藏列只是将列设置为不可见，但它仍然存在于 DOM 中，并且仍然会占据指定的宽度空间。\n\n如果你希望隐藏列后不再占据宽度空间，可以通过设置 fixed 属性为 left 或 right 来固定列，并且将该列的宽度设置为0。这样隐藏列后，它将不再占据宽度空间。\n\n以下是一个示例代码：\n\njsx\nimport { Table } from 'antd';\n\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 200,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 100,\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 App = () => {\n return (\n <Table\n columns={columns}\n dataSource={data}\n scroll={{ x: '100%' }}\n sticky\n />\n );\n};\n\nexport default App;\n\n\n在上述示例中，我们将列 Address 的宽度设置为200，并将其固定在右侧。当隐藏该列时，它将不再占据宽度空间。