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

效果图:

废话不多说直接上代码,完整代码展示:

html 复制代码
<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 方法获取最终选中的数据。
相关推荐
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端13 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧13 小时前
Promise 的使用
前端·javascript