[JavaScript知识库]elementUI （Vue2.6.14）表格统计(SUM)行合并实现方法

?

合并前:?

?合并后:

?方法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>

?

?

?