antdv table 一对多表格 表格合并（暂时没时间整理）

<script lang="ts" setup>
  import { Table } from 'ant-design-vue';
  import { ref } from 'vue';
  const dataSource = ref([]); // 处理后的数据
  const responseData = ref([
    // 原始数据（接口返回的数据）
    {
      classId: 16,
      className: '测试班级4',
      totalAmount: 220,
      chargeList: [
        {
          chargeId: 23,
          chargeName: 'LM书本费',
          amount: 10,
        },
        {
          chargeId: 24,
          chargeName: 'LM课后服务费',
          amount: 100,
        },
        {
          chargeId: 25,
          chargeName: 'LM住宿费',
          amount: 100,
        },
        {
          chargeId: 28,
          chargeName: 'LM住宿费3',
          amount: 10,
        },
      ],
    },
    {
      classId: 17,
      className: '测试班级5',
      totalAmount: 220,
      chargeList: [
        {
          chargeId: 23,
          chargeName: 'LM书本费',
          amount: 10,
        },
        {
          chargeId: 24,
          chargeName: 'LM课后服务费',
          amount: 100,
        },
        {
          chargeId: 25,
          chargeName: 'LM住宿费',
          amount: 100,
        },
        {
          chargeId: 28,
          chargeName: 'LM住宿费3',
          amount: 10,
        },
      ],
    },
  ]);
  // 数据处理的方法
  const toDataSource = () => {
    let arr = [];
    responseData.value.map((responseDataItem) => {
      let len = responseDataItem.chargeList.length;
      responseDataItem.chargeList.map((item, index) => {
        arr = [
          ...arr,
          {
            className: responseDataItem.className,
            totalAmount: responseDataItem.totalAmount,
            chargeName: item.chargeName,
            amount: item.amount,
            span: index === 0 ? len : 0,
          },
        ];
        return arr;
      });
      return arr;
    });
    dataSource.value = arr;
  };
  toDataSource();
  const columns = [
    {
      title: '班级名称',
      dataIndex: 'className',
      align: 'center',
      customCell: (record, rowIndex, column) => {
        return {
          rowSpan: record.span,
        };
      },
    },
    {
      title: '项目名称',
      dataIndex: 'chargeName',
      align: 'center',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      align: 'center',
    },
    {
      title: '总金额',
      dataIndex: 'totalAmount',
      align: 'center',
      customCell: (record, rowIndex, column) => {
        return {
          rowSpan: record.span,
        };
      },
    },
  ];
</script>
<template>
  <div class="container-m">
    <Table :data-source="dataSource" :columns="columns" bordered> </Table>
  </div>
</template>
<style lang="less" scoped></style>