Element UI 表格头部添加合计项设置；

需求：请求过来的数据需要在表格头添加合计项统计。效果如下：

代码实现：vue/html

:span-method="arraySpanMethod"

js:

    // 插入合计的数据
    summaryFun(obj){ 
      var obj = obj;
      this.tableData.unshift(obj);
    },
    // 合并合计第一行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        if (columnIndex === 0) {
            return [0, 0];
        } else if (columnIndex === 1) {
            return [1, 2];
        }
      }
    },

    
    /**
     * 获取数据内容
     */
    async currentChangePage(param) {
      let params = { // 请求参数
       ...param,
        'page': this.currentPage,
        'limit': this.pagesize
      }
      this.loading = true
      try {
        const res = await dueInfoSearchList(params) 
        this.loading = false
        if (res.code == 0) { 
          this.tableData = res.data.list;
          this.totall = res.data.count;

          let obj = {
            wholesaler_name: '合计', 
            paid_money: res.data.paid_money,
            total_payed: res.data.total_payed,
            unpaid_money: res.data.unpaid_money
          } 
          this.summaryFun(obj)
        }else{
          this.$message.error(res.msg);
        }
      } catch (error) {
         this.loading = false
         throw new Error(error); 
      }  
    } 

css:

 /deep/ .el-table__body{
    tbody{
      tr.el-table__row:first-child{
        td{
          font-weight: bold;
          font-size: 18px;
          // &:first-child{
          //  text-align: center;
          // }
        }
      }
    }
 }