vue+element根据数据循环生成多个table，如何实现最后一列 平均分合并

Question

根据数据循环生成多个table，如何实现最后一列 平均分 合并？ 注意是根据数据循环生成多个table

<div class="records" v-for="(item, index) in recordsList" :key="index">
            <p style="padding: 5px, 10px; margin: 10px, 0;font-weight: 700; padding-left: 10px;">
              <!-- <span style="float: left"></span>
              <span style="float: center"></span> -->
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">{{ item.titleName }}</div>
                </el-col>
              </el-row>
            </p>
            <el-table border class="tab3" :data="item.list.filter((v) => v.isCheckQualityScore!=0&&v.qualityScoreStr!='不打分')" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%; table-layout: fixed; overflow: auto">
              <el-table-column align="center" type="index" label="序号" width="100" />
              <!-- <el-table-column align="center" :show-overflow-tooltip="true" prop="qualityScore" label="分数" /> -->
              <el-table-column align="center" :show-overflow-tooltip="true" label="分数">
                <template slot-scope="scope">
                  {{ scope.row.qualityScore }}
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="qualityScoreBak" label="备注" />
              <el-table-column align="center" :show-overflow-tooltip="true" label="平均分">
                <span>平均分：{{ item.avgScore }}</span>
              </el-table-column>
              <!-- <el-table-column align="center" :show-overflow-tooltip="true" prop="handlerName" label="考评人" />
              <el-table-column align="center" :show-overflow-tooltip="true" prop="checkHandlerTime" label="考评时间" /> -->
            </el-table>
          </div>



this.recordsList = [{"titleName":"test_20210806_06_2","avgScore":"38.8","list":[{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":6,"isCheckQualityScore":"1","docId":"docid:937766B1DE6A4A788114C5EF2B5033F7","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":"1","completeScoreStr":null,"interacterId":null,"qualityScore":74,"id":4982,"qualityScoreStr":"74","qualityScoreBak":"噼噼啪啪铺铺铺铺铺铺铺铺铺铺","projectId":1497,"taskId":"tid:3561D1C86E054FA0A29A4A444B238038"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":7,"isCheckQualityScore":"1","docId":"docid:937766B1DE6A4A788114C5EF2B5033F7","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":null,"completeScoreStr":null,"interacterId":null,"qualityScore":11,"id":4991,"qualityScoreStr":"11","qualityScoreBak":"11111111","projectId":1497,"taskId":"tid:7CD2D5B1A13448AD8A6A44232005E6DE"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":7,"isCheckQualityScore":"0","docId":"docid:937766B1DE6A4A788114C5EF2B5033F7","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":null,"completeScoreStr":null,"interacterId":null,"qualityScore":0,"id":4992,"qualityScoreStr":"不打分","qualityScoreBak":null,"projectId":1497,"taskId":"tid:2F812FB2643C4B99A12F594D931506C0"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":7,"isCheckQualityScore":"1","docId":"docid:937766B1DE6A4A788114C5EF2B5033F7","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":null,"completeScoreStr":null,"interacterId":null,"qualityScore":10,"id":4994,"qualityScoreStr":"10","qualityScoreBak":"11111111111111111","projectId":1497,"taskId":"tid:FA5EFE2539824EFF8ED6E1287F1005AE"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":6,"isCheckQualityScore":"1","docId":"docid:937766B1DE6A4A788114C5EF2B5033F7","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":"1","completeScoreStr":null,"interacterId":null,"qualityScore":11,"id":5001,"qualityScoreStr":"11","qualityScoreBak":"11111111111","projectId":1497,"taskId":"tid:35CD72388C8C47B09E5E49C5B825EE48"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":6,"isCheckQualityScore":"0","docId":"docid:937766B1DE6A4A788114C5EF2B5033F7","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-08","completeScore":null,"title":"test_20210806_06_2","checkStatus":"0","completeScoreStr":null,"interacterId":null,"qualityScore":0,"id":5021,"qualityScoreStr":"不打分","qualityScoreBak":null,"projectId":1497,"taskId":"tid:1C2A1E7D984B4C0585A47CA8661CE672"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":7,"isCheckQualityScore":"1","docId":"docid:937766B1DE6A4A788114C5EF2B5033F7","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-19","completeScore":null,"title":"test_20210806_06_2","checkStatus":null,"completeScoreStr":null,"interacterId":null,"qualityScore":88,"id":5092,"qualityScoreStr":"88","qualityScoreBak":"88","projectId":1497,"taskId":"tid:21D7C05F49DD4B32BAB7C3E9B97DDCBB"}]},{"titleName":"8888888888888888888888888888","avgScore":"8.75","list":[{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":7,"isCheckQualityScore":"1","docId":"docid:BA0837EC82EF4AC288132532D5B65F39","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":null,"completeScoreStr":null,"interacterId":null,"qualityScore":12,"id":4961,"qualityScoreStr":"12","qualityScoreBak":null,"projectId":1497,"taskId":"tid:5DD011D1BF3544DAA133A28C41068EEA"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":6,"isCheckQualityScore":"1","docId":"docid:BA0837EC82EF4AC288132532D5B65F39","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":"1","completeScoreStr":null,"interacterId":null,"qualityScore":11,"id":4962,"qualityScoreStr":"11","qualityScoreBak":null,"projectId":1497,"taskId":"tid:D75A133D68404885938906BFA11850D3"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":6,"isCheckQualityScore":"1","docId":"docid:BA0837EC82EF4AC288132532D5B65F39","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":"1","completeScoreStr":null,"interacterId":null,"qualityScore":1,"id":4971,"qualityScoreStr":"1","qualityScoreBak":null,"projectId":1497,"taskId":"tid:2D151237008D4F2B9A34992FC23D44D9"},{"appraiseBatchsId":null,"piid":0,"handler":"GZZOUJIE","handleStep":7,"isCheckQualityScore":"1","docId":"docid:BA0837EC82EF4AC288132532D5B65F39","isValid":1,"handlerName":"邹杰","checkHandlerTime":"2023-06-03","completeScore":null,"title":"test_20210806_06_2","checkStatus":null,"completeScoreStr":null,"interacterId":null,"qualityScore":11,"id":4981,"qualityScoreStr":"11","qualityScoreBak":null,"projectId":1497,"taskId":"tid:69247AE711EB4156BD9ED49289D49ABE"}]},{"titleName":"意见栏","avgScore":"0","list":[{"appraiseBatchsId":null,"piid":0,"handler":"BYY","handleStep":6,"isCheckQualityScore":"0","docId":"docid:4336BE61E31F4C0491E43F8BFD453930","isValid":1,"handlerName":"包莹莹","checkHandlerTime":"2022-03-18","completeScore":null,"title":"test_20210806_06_2","checkStatus":"BYY","completeScoreStr":null,"interacterId":null,"qualityScore":0,"id":3384,"qualityScoreStr":"不打分","qualityScoreBak":null,"projectId":1497,"taskId":"tid:8EE5188680AE49F6AA9210B66A563723"}]},{"titleName":"test_20210806_06_2","avgScore":"80","list":[{"appraiseBatchsId":null,"piid":0,"handler":"CHENYUN","handleStep":6,"isCheckQualityScore":null,"docId":"docid:AB304BBF0991415B9AD23FE015861565","isValid":1,"handlerName":"陈韵","checkHandlerTime":"2022-03-10","completeScore":null,"title":"test_20210806_06_2","checkStatus":"CHENYUN","completeScoreStr":null,"interacterId":null,"qualityScore":80,"id":3081,"qualityScoreStr":"80","qualityScoreBak":"一般般啦","projectId":1497,"taskId":null}]}]

根据数据循环生成多个table，如何实现平均分合并，需要实现效果如图下

Answer 1

该回答引用ChatGPT4o, 并由本人整理回复, 如有帮助，还请采纳。
为了实现你在图二中展示的“平均分”列合并效果，可以通过以下方法在 Vue 和 Element UI 中实现：

1. 使用 el-table 的 footer 插槽来展示一个合并的平均分行。这样可以将“平均分”显示在表格底部的合并单元格中。
2. 调整模板代码，使得 footer 插槽显示合并的平均分。

以下是具体代码实现：

<div class="records" v-for="(item, index) in recordsList" :key="index">
    <p style="padding: 5px 10px; margin: 10px 0; font-weight: 700; padding-left: 10px;">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple">{{ item.titleName }}</div>
            </el-col>
        </el-row>
    </p>
    
    <el-table
        :data="item.list.filter(v => v.isCheckQualityScore != 0 && v.qualityScoreStr != '不打分')"
        border
        class="tab3"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%; table-layout: fixed; overflow: auto"
    >
        <!-- 表格主体部分 -->
        <el-table-column align="center" type="index" label="序号" width="100" />
        <el-table-column align="center" :show-overflow-tooltip="true" label="分数">
            <template #default="scope">
                {{ scope.row.qualityScore }}
            </template>
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" prop="qualityScoreBak" label="备注" />

        <!-- 表格底部：合并“平均分” -->
        <template #footer>
            <tr>
                <td colspan="3" align="center">
                    平均分：{{ item.avgScore }}
                </td>
            </tr>
        </template>
    </el-table>
</div>

解释

• 使用 footer 插槽可以自定义表格的底部内容，展示一个合并的“平均分”行。
• 在 footer 插槽中，将整个表格的底部合并成一行（colspan="3"），并在其中展示平均分：{{ item.avgScore }}。

注意事项

• 确保 item.avgScore 在 recordsList 数据中是正确计算的平均分值。
• footer 插槽中的 <tr> 和 <td> 标签将会替换默认的表格底部内容，从而实现合并单元格的效果。

这样就能实现你所要求的效果，将“平均分”列合并展示在表格底部。