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

场景图片：

图片1：

图片2：

---

 一：使用element中的方法

优点：

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

缺点：

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

1：html部分

<el-table
      v-loading="loading"
      :data="tableData"
      :border="true"
      style="width: 100%;"
      :header-cell-style="{textAlign:'center'}"
      :cell-style="{textAlign:'center'}"
      show-summary
      :summary-method="tableHeJi"
      :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column
        prop="expenseCategory"
        label="费用类别"
        min-width="100"
        sortable
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="运营公司"
        min-width="100"
        sortable
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="contractNumber"
        label="合同编号"
        min-width="100"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="contractName"
        min-width="80"
        label="合同名称"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="payee"
        min-width="150"
        label="收款单位或个人"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="summaryPaymentContent"
        label="申请事由"
        min-width="120"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="appMoney"
        label="付款金额"
        min-width="130"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="fundingPlan"
        label="计划月份"
        min-width="100"
        sortable
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="payStatus"
        label="审批状态"
        min-width="80"
        :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>

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部分

<el-table
      v-loading="loading"
      :data="tableData"
      :span-method="objectSpanMethod"
      :border="true"
      style="width: 100%;"
      :header-cell-style="{textAlign:'center'}"
      :cell-style="{textAlign:'center'}"
      :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column fixed type="index" label="序号" width="50">
        <template slot-scope="scope">
          <div>{{scope.$index+(formData.page-1)*formData.rows+1}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="lineName"
        label="线路"
        min-width="120"
        sortable
        :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div class="absoluteDot" v-if="scope.row.addRow=='1'">
            <div class="relative">
              <div class="absolute flex-center H50">
                <div class="">施工单位签名：</div> 
                <div class="">
                  <img src="" style="width:120px;height: 30px;
                    background:rgba(118, 222, 107, 0.577); ">
                </div>
              </div>
            </div>
          </div>
          <div class="absoluteDot" v-if="scope.row.addRow=='2'">
            <div class="relative">
              <div class="absolute">
                意见：{{ msg1 }}
              </div>
            </div>
          </div>
          <div class="absoluteDot" v-if="scope.row.addRow=='5'">
            <div class="relative">
              <div class="absolute flex-center H50">
                <div class="">单位领导签名：</div> 
                <div class="">
                  <img src="" style="width:120px;height: 30px;
                        background:rgba(118, 222, 107, 0.577); ">
                </div>
              </div>
            </div>
          </div>
          <div class="absoluteDot" v-if="scope.row.addRow=='6'">
            <div class="relative">
              <div class="absolute">
                意见：{{ msg2 }}
              </div>
            </div>
          </div>
          <div v-else>
            {{scope.row.lineName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="contractNumber"
        label="合同编号"
        min-width="90"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="contractName"
        label="合同名称"
        min-width="120"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="procingCode"
        label="验工计价编号"
        min-width="120"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="pricingDate"
        min-width="80"
        label="验工年月"
        :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div class="absoluteDot" v-if="scope.row.addRow=='1'">
            <div class="relative">
              <div class="absolute flex-center H50">
                <div class="">经理签名：</div> 
                <div class="">
                  <img src="" style="width:120px;height: 30px;
                              background:rgba(118, 222, 107, 0.577); ">
                </div>
              </div>
            </div>
          </div>
          <div class="absoluteDot" v-if="scope.row.addRow=='2'">
            <div class="relative">
              <div class="absolute">
                意见：{{ msg3 }}
              </div>
            </div>
          </div>
          <div class="absoluteDot" v-if="scope.row.addRow=='5'">
            <div class="relative">
              <div class="absolute flex-center H50">
                <div class="">董事长签名：</div> 
                <div class="">
                  <img src="" 
                    style="width:120px;height: 30px;
                     background:rgba(118, 222, 107, 0.577); ">
                </div>
              </div>
            </div>
          </div>
          <div class="absoluteDot" v-if="scope.row.addRow=='6'">
            <div class="relative">
              <div class="absolute">
                意见：{{ msg4 }}
              </div>
            </div>
          </div>
          <div v-else>
            {{scope.row.pricingDate}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="approvalAmount"
        min-width="150"
        label="核准完成金额（万元）"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="nowPayPricing"
        label="本次支付（万元）"
        min-width="120"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="persistentDay"
        label="持续时间（天）"
        min-width="130"
        sortable
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="nowNode"
        label="当前处理节点"
        min-width="100"
        :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>

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);
    },