前端开发过程中，嵌套数组的处理

开发过程中，假设碰到这样的数据

 export const fakeData =   {
  total: 639,
  pageSize: 10,
  pageNo: 1,
  data_list: [
    {
      pline_info: [
        {
          pline_name: 'quis laboris ex',
          pline_code: 'eiusmod dolor in',
          production_line_name: 'in eiusmod ea',
          production_line_code: 'cillum exercitation qui dolore sed',
        },
        {
          pline_code: 'non in ex officia',
          pline_name: 'velit aute aliquip',
          production_line_name: 'ex ea ullamco ipsum veniam',
          production_line_code: 'deserunt cillum sint Duis',
        },
        {
          production_line_name: 'reprehenderit nulla do',
          production_line_code: 'ipsum id sint',
          pline_name: 'Ut',
          pline_code: 'laboris do dolor eu ipsum',
        },
        {
          production_line_name: 'sint pariatur ad minim voluptate',
          pline_code: 'sit culpa sint',
          pline_name: 'sunt eiusmod laboris aute',
          production_line_code: 'Excepteur',
        },
        {
          pline_name: 'amet cupidatat ea',
          pline_code: 'ullamco enim qui',
          production_line_name: 'nisi elit incididunt',
          production_line_code: 'pariatur sed non elit mollit',
        },
      ],
      role: 'non',
      vendor: 'esse elit cillum quis dolor',
      update_time: 'eiusmod',
      dispatch_uuid: 'nostrud adipisicing qui ad Excepteur',
      score: 'veniam enim proident tempor',
      create_time: 'enim eu anim',
      user_name: 'consectetur exercitation ea',
      u_id: 'ex in',
    },
    {
      role: 'magna et qui est sit',
      pline_info: [
        {
          pline_code: 'irure',
          production_line_name: 'magna',
          production_line_code: 'proident officia ut mollit velit',
          pline_name: 'Ut',
        },
        {
          pline_code: 'dolore anim',
          production_line_code: 'aliquip est enim mollit et',
          production_line_name: 'eu amet',
          pline_name: 'reprehenderit qui',
        },
      ],
      u_id: 'Excepteur eu do',
      score: 'adipisicing',
      user_name: 'in aliqua id cillum esse',
      vendor: 'reprehenderit Excepteur laborum irure',
      create_time: 'non dolore',
      dispatch_uuid: 'officia',
      update_time: 'esse dolore',
    },
  ],
};

` 

展示方式有两种， 其一， 使用内联表格， 通过展开收起来展示或者隐藏类似于pline_info 这样的内联字段。 

还有第二种方法， 将pline_info 字段给拍平， 通过行列合并的方式来展示， 这就需要对数据进行处理

```js
    export function transformData(data) {
  const result = [];
  let uniqueKeyId = 1; // 初始化唯一键的起始值

  data.forEach((item) => {
    if (item.pline_info.length > 0) {
      item.pline_info.forEach((pline, i) => {
        uniqueKeyId += 1;
        const newItem = {
          ...item, // 复制原始数据项的所有属性
          ...pline, // 合并pline_info中的属性
          unique_key: uniqueKeyId, // 添加唯一键
          rowSpan: i === 0 ? item.pline_info.length : 0, // 第一行设置rowSpan
        };
        // 删除不需要的pline_info属性
        result.push(newItem);
      });
    } else {
      result.push({
        ...item,
        unique_key: Math.random(),
        rowSpan: 1,
      });
    }
  });
  console.log(result);
  return result;
}

通过rowSpan来跨行， 而columns中需要跨行的列字段进行如下配置

 {
    customRender: (value, item) => ({
      children: value,
      attrs: {
        rowSpan: item.rowSpan,
      },
    }),
    width: '140px', align: 'center', title: '角色', dataIndex: 'role', key: 'role',
  },
  {
    customRender: (value, item) => ({
      children: value,
      attrs: {
        rowSpan: item.rowSpan,
      },
    }), width: '140px', align: 'center', title: '人员u_id', dataIndex: 'u_id', key: 'u_id',
  },

以上方案适用于antdv + vue2.0的环境