React+Antd表格如何根据showColumn状态控制列的显隐

你当前通过className控制列显示隐藏的方式存在缺陷：虽然视觉上隐藏了列，但该列的DOM结构（包括表头）依然存在，可能导致表格布局异常（比如留白、列宽分配错误），且不符合Antd表格的推荐用法。

推荐直接通过动态构建columns数组的方式实现需求，具体有两种常用方案：

方案一：动态拼接列配置 #

在定义menuColumns时，根据showColumn状态决定是否包含目标列：

const menuColumns = [
    {
        title: "Date",
        dataIndex: "createdAt",
        key: "createdAt",
        render: (_, { createdAt }) => (
            <Moment format="D MMM, YY">{createdAt}</Moment>
        ),
    },
    // 仅当showColumn为true时，添加Action列
    ...(showColumn ? [{
        title: "Action",
        dataIndex: "",
        key: "action", // 注意：key不能为空，避免Antd控制台警告
        render: record => (
            <>
                {!record.kitchen_received ?
                    <Button type="primary" onClick={() => showModal(record)}>
                        Delivered
                    </Button> : <i className='bi-check-lg'></i>}
            </>
        ),
    }] : []),
];

方案二：过滤基础列数组 #

先定义所有列的基础配置，再根据状态过滤出需要渲染的列：

// 定义所有列的基础配置
const baseColumns = [
    {
        title: "Date",
        dataIndex: "createdAt",
        key: "createdAt",
        render: (_, { createdAt }) => (
            <Moment format="D MMM, YY">{createdAt}</Moment>
        ),
    },
    {
        title: "Action",
        dataIndex: "",
        key: "action",
        render: record => (
            <>
                {!record.kitchen_received ?
                    <Button type="primary" onClick={() => showModal(record)}>
                        Delivered
                    </Button> : <i className='bi-check-lg'></i>}
            </>
        ),
    },
];

// 根据showColumn状态过滤列
const menuColumns = baseColumns.filter(col => {
    // 对Action列进行条件过滤，其他列默认保留
    if (col.key === "action") {
        return showColumn;
    }
    return true;
});

方案优势 #

• 直接从源头上控制列的存在，不会生成多余DOM结构，表格布局更准确
• 符合Antd表格的设计逻辑，避免控制台警告（比如空key的问题）
• 状态切换时，表格会自动重新渲染并调整布局，无需额外处理样式

内容的提问来源于stack exchange，提问作者etranz