如何通过Antd复选框组控制Antd Table列的显示与隐藏？

直接给你改好的核心逻辑，照着替换就能实现需求：

步骤1：整理列配置，添加默认显示标记 #

先把表格列的配置抽成独立数组，给需要默认显示的列加上defaultVisible: true，不需要默认显示的设为false或省略（默认不显示）：

const allColumns = [
  { key: 'name', title: 'Name', dataIndex: 'name', defaultVisible: true },
  { key: 'age', title: 'Age', dataIndex: 'age', defaultVisible: true },
  { key: 'address', title: 'Address', dataIndex: 'address' },
  { key: 'operation', title: 'Operation', dataIndex: 'operation', defaultVisible: true },
];

步骤2：用状态管理显示列集合 #

在组件里初始化状态，默认加载所有defaultVisible为true的列key：

const [visibleColumns, setVisibleColumns] = useState(
  allColumns.filter(col => col.defaultVisible).map(col => col.key)
);

步骤3：渲染复选框组 #

将复选框组与状态绑定，选项直接从列配置数组生成：

<Checkbox.Group
  value={visibleColumns}
  onChange={setVisibleColumns}
  style={{ marginBottom: 16 }}
>
  {allColumns.map(col => (
    <Checkbox key={col.key} value={col.key}>
      {col.title}
    </Checkbox>
  ))}
</Checkbox.Group>

步骤4：动态生成表格列 #

表格的columns属性通过过滤列配置数组，只保留当前选中的列：

<Table
  columns={allColumns.filter(col => visibleColumns.includes(col.key))}
  dataSource={data}
  rowKey="key"
/>

关键注意点 #

• 列的key必须唯一，这是关联复选框和表格列的核心标识
• 状态存储的是列key数组，Checkbox.Group会自动处理多选的选中状态
• 如果需要持久化用户的选择，可以把visibleColumns存入localStorage，初始化时读取即可

替换你demo里的对应代码就能正常实现列的显示/隐藏切换，默认勾选的列也会正确显示。

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