element-ui中的el-table的summary-method（合计）的使用

场景图片：

图片1：

图片2：

---

 一：使用element中的方法

优点：

        直接使用summary-method方法，直接，方便

缺点：

        只是在表格下面添加了一行，如果想有多行就不行了

1：html部分

2：js方法

tableHeJi(val){
      const { columns, row } = val;
      const sums = [];
      columns.forEach((item, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        else if(index===4){
          sums[index] = "合同数量："
          return;
        }
        else if(index===5){
          sums[index] = this.heJiObj.contractSum==null
            ||this.heJiObj.contractSum==""?""
            :this.heJiObj.contractSum
          return;
        }
        
        else if(index===8){
          sums[index] = "付款金额合计（元）："
          return;
        }
        else if(index===9){
          sums[index] = 
            this.heJiObj.sum==null||this.heJiObj.sum==""?""
            :this.heJiObj.sum
          return;
        }
      });
      return sums
    },

---

二：自己定义

优点：

         可以想表格下面添加多少行都行，

缺点：

        列表的序号会一直往下走

 1：html部分

2：css部分

.absoluteDot{
    position: absolute;
    left: 10px;
    top: 0px;
    width: 0px;
    height: 0px;
  }
  .relative{
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 100;
  }
  .absolute{
    /* border: 1px solid #fc7f7f; */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 230px;
    white-space:break-spaces;
    text-align: left;
  }

  .H50{
    height: 50px;
  }

3：js部分

// 获取列表的初始化数据
    getTableData(){
      this.loading=true;
        tableList(this.formData)
        .then(res=>{
          this.loading=false;
          if(res.code==0){
            this.tableData=res.data.list;
            this.tableAdd();//想表格中添加行的方法
          }
        })
      
    },
    tableAdd(){
      let totalTable1={};
      totalTable1.addRow="1"
      this.tableData.push(totalTable1);
      let totalTable2={};
      totalTable2.addRow="2"
      this.tableData.push(totalTable2);
      let totalTable3={};
      totalTable3.addRow="3"
      this.tableData.push(totalTable3);
      let totalTable4={};
      totalTable4.addRow="4"
      this.tableData.push(totalTable4);
      let totalTable5={};
      totalTable5.addRow="5"
      this.tableData.push(totalTable5);
      let totalTable6={};
      totalTable6.addRow="6"
      this.tableData.push(totalTable6);
      let totalTable7={};
      totalTable7.addRow="7"
      this.tableData.push(totalTable7);
      let totalTable8={};
      totalTable8.addRow="8"
      this.tableData.push(totalTable8);
    },