Antd Table避免列重复：嵌套对象数组数据循环展示求助

解决思路 #

核心是先把嵌套的对象数组扁平化，转换成Antd Table能直接识别的一维数据结构，再配置对应列即可。

具体实现步骤 #

1. 扁平化处理原始数据
   假设你的原始数据结构类似（对应你提供的mock.js片段）：

const rawData = [
  {
    // 其他字段...
    family: [
      { lastname: 'testing' },
      { lastname: 'testing 2' }
    ]
  }
];

用flatMap把嵌套数组展开成一维数组：

// 提取嵌套数组里的lastname相关数据
const tableData = rawData.flatMap(item => item.family);

2. 配置Table列
   只定义你需要的lastname列，避免冗余列：

const columns = [
  {
    title: 'Lastname',
    dataIndex: 'lastname',
    key: 'lastname' // 必须唯一，避免列重复
  }
];

3. 渲染Antd Table
   将处理好的数据源和列配置传入Table组件：

import { Table } from 'antd';

// 组件内渲染
<Table 
  columns={columns} 
  dataSource={tableData} 
  rowKey="lastname" // 用lastname作为唯一行标识，也可换其他唯一字段
/>

说明 #

• flatMap会自动把嵌套的数组展开成一维，确保Table能循环展示每一条lastname数据；
• key属性在columns和rowKey中必须唯一，这是Antd Table避免重复列/行的关键；
• 如果原始数据有多个父级对象，flatMap依然能正确展开所有嵌套的目标数组，统一输出一维数据。

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