element Table实现循环表格、跨表格复选框功能实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、跨表格使用复选框功能
• 二、代码实现步骤
  • 1.循环表格
  • 2.data数据格式
  • 3.定义方法
  • 4.实例
• 总结

---

前言

提示：遇到产品提到需求，根据批量查询条件搜索，渲染N个表格子数据，父级数据在表格上边显示，表格子数据循环，并且实现跨表格选中提交功能。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、跨表格使用复选框功能

示例：使用element UI => el-table里面的@selection-change选中方法众所周知，一般情况都是对单个表格实现，很少循环操作表格，这里关键是方法明($event,index)就能识别是哪一条数据点击的表格了。

二、代码实现步骤

1.表格循环

直接上代码（示例）：

<el-dialog title="开票确认" center class="detail" :visible.sync="invoiceSureFlag" >
      <div style="width: 100%;text-align: center;margin-top: -30px;font-size: 16px;color: #303133;margin-bottom: 20px;">
        （仅支持开具投保人抬头的发票）
      </div>
      <div style="border-top: 1px solid #eee;padding: 10px 0;max-height: 550px;overflow-y: auto;" >
        <div v-for="(item, index) in replayDataList" :key="index">
          <div style="height: 50px; line-height: 50px">
            开票保险公司：<span style="color: orange"
              >{{ item.insuranceName }}
            </span>
          </div>
          <el-table border ref="multipleTable" row-key="id" :data="item.applyMapList" :header-cell-style="headerStyle" @selection-change="handleSelectionChange2($event, index)" >
            <el-table-column type="selection" align="center" width="50"></el-table-column>
            <el-table-column label="发票信息" align="center">
              <template slot-scope="scope">
                <div class="item-cell">
                  <li>{{ scope.row.insurePeople.name }}</li>
                  <li>{{ scope.row.insurePeople.idCode }}</li>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="开票单数" align="center">
              <template slot-scope="scope">
                <div class="item-cell">
                  <li>
                    {{ scope.row["count(*)"] }}
                  </li>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="开票金额" align="center">
              <template slot-scope="scope">
                <div class="item-cell">
                  <li>¥{{ scope.row["sum(totalPrice)"] }}</li>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div style="text-align: right; height: 50px; line-height: 70px">已选中开票数：<span style="color: orange"> </span> 张，合计开票金额：¥ <span style="color: orange"></span> 元
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 20px">
        <el-button type="primary" style="background: #00a971; border-color: #00a971" @click="subFn()">确认开票</el-button>
      </div>
</el-dialog>

2.data数据格式

代码如下（示例）：

dataList: [{
    insuranceName: '名称1',
    applyMapList: [{
        policy-holder: '姓名',
        idCode: 12345678990,
        count(*):10,
        sum(amount):5,
    }, {
        policy-holder: '姓名2',
        idCode: 12345678990,
        count(*):10,
        sum(amount):5,
    }],
 }, {
    insuranceName: '名称2',
    applyMapList: [{
        policy-holder: '姓名',
        idCode: 12345678990,
        count(*):10,
        sum(amount):5,
    }, {
        policy-holder: '姓名2',
        idCode: 12345678990,
        count(*):10,
        sum(amount):5,
    }],
}],

此处为请求接口拿到的数据

3.定义方法

代码如下（示例）：

methods: {
    handleSelectionChange(e, index) {
       //（这里是对于取子集每一行携带父级字段进行批量提交）
      let data = JSON.parse(JSON.stringify(this.replayDataList));
      data[index].applyMapList = e;
      this.multipleSelection[index] = data[index];
      this.multipleSelection[index] = e;
      let arryList = [];
      this.multipleSelection.forEach((ele) => {
        ele.forEach((item) => {
          arryList.push(item);
        });
      });
      console.log("arryList", arryList);
      this.multipleSelectionList = arryList.map((itemm) => itemm.accountBillId);
      console.log("this.multipleSelectionList------>",this.multipleSelectionList);
    },
}

4.实例

提示：以下是子集每一行携带父级字段进行批量提交实例

---

总结

慢慢积累，慢慢成长，慢慢蜕变。