Antd表格隐藏列后宽度问题解决方案 - 使用render方法控制渲染

如果在Antd表格中设置了某一列的宽度，并且在隐藏该列后，它仍然占据宽度，可能是因为Antd表格的默认行为是将隐藏的列保留在DOM中，即使它们不可见。\n\n要解决这个问题，你可以使用columns属性中的render方法来控制该列的渲染。在render方法中，你可以根据某个属性来判断是否显示该列的内容。\n\n下面是一个示例代码：\n\njsx\nimport { Table } from 'antd';\n\nconst dataSource = [\n {\n key: '1',\n name: 'John',\n age: 32,\n showColumn: true, // 属性用于控制是否显示该列\n },\n {\n key: '2',\n name: 'Mike',\n age: 25,\n showColumn: false,\n },\n];\n\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 200,\n render: (text, record) => {\n // 根据showColumn属性判断是否显示该列的内容\n return record.showColumn ? text : null;\n },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 200,\n },\n];\n\nconst App = () => (\n <Table dataSource={dataSource} columns={columns} />\n);\n\nexport default App;\n\n\n在上面的示例中，我们使用了render方法来控制Name列的渲染。如果showColumn属性为true，则显示该列的内容，否则返回null，从而隐藏该列的内容。\n\n这样，在隐藏该列后，它将不再占据宽度。