elementUI （Vue2.6.14）表格统计(SUM)行合并实现方法

cg_ssh

墨衍会员 · AI 创作全网分发码龄16年

关注

原创最新推荐文章于 2026-07-26 11:03:24 发布 972 阅读 AI 写同款· GEO 优化 ›

el-table 表格新增一行合计根据产品需求要求计算出当前页面的总合计金额和点击复选框显示复选框里的计算金额。1.自己搭建的页面结构。阅读详情

合并前:

合并后:

方法1 传统模式：使用 <el-table> 的 @span-method="colsPanSumFunction " 方式，会执行 colsPanSumFunction 函数 row*column 次数 。（放弃该方法）此方法适用普通行和列的合并官网也是这种方法。

方法2 旁门左道：在每次表格数据变化后, 通过 this.$nextTick(this.colsPanSumFunction()) 合并列，调用次数等于表格数据刷新次数。适用SUM行和列的合并。

<template>
<el-table:id="customTableId" .....
...
...
</template>

<script>
method:{
data:{
   customTableId:'myTable_Id' //table的ID
},
//SUM列合并方法，返回一个函数
 colsPanSumFunction(){
   return ()=>{
    let tableId='#'+this.customTableId;
    if (this.$el.querySelector(tableId)) {
      let sumRow = this.$el.querySelector(tableId)
        .querySelector(".el-table__footer-wrapper")
        .querySelector(".el-table__footer");
      if (sumRow != null) {
        let cs = sumRow.rows[0].cells;
        if (cs.length > 0) {
          let c0 = cs[0];
          c0.innerHTML = '<div style="font-size: 14px;">
          <i class="el-icon-cpu" style="font-weight: bold;"/>
         <b>合 计:</b></div>';
          c0.colSpan = "2";//第一列占两列
          cs[1].style.display = "none";//第二列隐藏
        }
      }
    }
  };
 },
 reLoadTableData(){
    this.tableData=[];//载入tableData
    ...
    this.$nextTick(this.colsPanSumFunction());//表格数据填充完毕后，执行一次完成列合并
 }
}
</script>