纵向合并单元格——table

• 将list数据处理成tableDate格式，id重复的数据，只有第一项有num字段（num是重复的个数）
• 渲染表格，纵向合并第1、2、6列，id相同的合并

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 60%; margin: 20px"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="num" label="num" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: "1",
          num: 3,
          car: [
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
          ],
          amount3: 3,
        },
        {
          id: "2",
          num: 2,
          car: [
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
          ],
          amount3: 3,
        },
        {
          id: "3",
          num: 1,
          car: [
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
          ],
          amount3: 3,
        },
        {
          id: "4",
          num: 4,
          car: [
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
            {
              name: "大萨达",
              amount1: 22,
              amount2: 1000,
            },
          ],
          amount3: 30,
        },
      ],
      tableData: [
        {
          id: "1",
          num: 3,
          name: "王小虎1",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "1",
          name: "王小虎2",
          amount1: "234",
          amount2: "3.2",
        },
        {
          id: "1",
          name: "王小虎3",
          amount1: "234",
          amount2: "3.2",
        },
        {
          id: "2",
          num: 2,
          name: "王小虎4",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "2",
          name: "王小虎5",
          amount1: "165",
          amount2: "4.43",
        },
        {
          id: "3",
          num: 1,
          name: "王小虎6",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "4",
          num: 4,
          name: "王小虎7",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "4",
          name: "王小虎8",
          amount1: "539",
          amount2: "4.1",
        },
        {
          id: "4",
          name: "王小虎9",
          amount1: "539",
          amount2: "4.1",
        },
        {
          id: "4",
          name: "王小虎10",
          amount1: "539",
          amount2: "4.1",
        },
      ],
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
        if (row.num) {
          return { rowspan: row.num, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      return { rowspan: 1, colspan: 1 };
    },
    flattenAndMerge(data) {
      const result = [];

      // 遍历原始数据
      data.forEach((item) => {
        // 提取公共字段
        const commonFields = {
          id: item.id,
          amount3: item.amount3,
        };

        // 遍历 car 数组
        item.car.forEach((carItem, index) => {
          // 复制公共字段
          const rowData = { ...commonFields };

          // 添加 car 数组中的字段
          rowData.name = carItem.name;
          rowData.amount1 = carItem.amount1;
          rowData.amount2 = carItem.amount2;

          // 如果是第一个元素，则保留 num 字段
          if (index === 0) {
            rowData.num = item.num;
          }

          result.push(rowData);
        });
      });

      return result;
    },
  },
  mounted() {
    this.tableData = this.flattenAndMerge(this.list);
    console.log(this.tableData);
  },
};
</script>