el-table利用折叠面板 type=“expand“ 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式

效果图:

废话不多说直接上代码，完整代码展示：

<template>
  <el-table
    border
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
  >
    <el-table-column
      width="50"
      label="明细"
      type="expand"
    >
      <template slot-scope="scope">
        <el-table
          @selection-change="handleInnerSelectionChange(scope.row, $event)"
          border
          :data="scope.row.orderItemInfos"
          size="mini"
          style="width: 95%; margin-left: 3%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="xmmc" label="商品名称" align="center" />
          <el-table-column prop="ggxh" label="规则型号" align="center" />
          <el-table-column prop="xmsl" label="数量" align="center" />
          <el-table-column prop="xmdw" label="单位" align="center" />
        </el-table>
      </template>
    </el-table-column>
    <el-table-column
      type="index"
      label="序号"
      width="50"
    />
    <el-table-column
      prop="ghfMc"
      label="购方名称"
      width="220"
    />
    <el-table-column
      prop="ghfNsrsbh"
      label="购方税号"
      width="200"
    />
  </el-table>

  <!-- 示例按钮用于测试 -->
  <el-button @click="getSelectedData">获取选中数据</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          ghfMc: '公司A',
          ghfNsrsbh: '1234567890',
          fphm: '发票1',
          kphjje: '1000',
          sykchje: '500',
          hjbhsje: '800',
          kpse: '200',
          orderItemInfos: [
            { xmmc: '商品A', ggxh: '规格A', xmsl: 10, xmdw: '件' },
            { xmmc: '商品B', ggxh: '规格B', xmsl: 20, xmdw: '件' }
          ]
        },
        {
          id: 2,
          ghfMc: '公司B',
          ghfNsrsbh: '0987654321',
          fphm: '发票2',
          kphjje: '1500',
          sykchje: '700',
          hjbhsje: '1000',
          kpse: '500',
          orderItemInfos: [
            { xmmc: '商品C', ggxh: '规格C', xmsl: 15, xmdw: '件' },
            { xmmc: '商品D', ggxh: '规格D', xmsl: 25, xmdw: '件' }
          ]
        }
      ],
      selectedMainRows: [], // 选中的主行
      selectedDetailRows: {}, // 选中的明细行，按主行 ID 分类
      selectedDataRows: [] // 最终选中的数据
    };
  },
  methods: {
  // 处理子表格的选择变化
handleInnerSelectionChange(row, selectedRows) {
  // 使用 row 的 id 作为键值，存储选中的子表格行
  this.selectedDetailRows[row.id] = selectedRows;

  // 确保主行也被选中
  if (!this.selectedMainRows.includes(row)) {
    this.selectedMainRows.push(row);
  }

  // 更新最终选中的数据
  this.selectedDataRows = this.getSelectedData();
}

// 获取最终选中的数据
getSelectedData() {
  const selectedData = [];

  // 遍历选中的主行
  this.selectedMainRows.forEach(mainRow => {
    // 获取当前主行对应的子表格行
    const detailRows = this.selectedDetailRows[mainRow.id] || [];

    // 如果有选中的子表格行，则将主行及其子行添加到结果中
    if (detailRows.length > 0) {
      selectedData.push({
        ...mainRow, // 合并主行数据
        hzqrdDetailVOList: detailRows // 添加选中的子行
      });
    }
  });

  // 返回最终选中的数据
  return selectedData;
}
};
</script>

通过这种方式，我们可以确保每次子表格中的选择发生变化时，主行和子行的数据都能得到同步更新，并且可以通过 getSelectedData 方法获取最终选中的数据。