el-table表格内部加合计和单元格合并element

1.需求，做一个表格内部合计加单元格合并

2.在template中

<el-table
  class="threeTable"
  :height="tabHeight"
  :data="tableData"
  v-loading="tabLoading1"
  ref="multipleTable1"
  stripe
  style="width: 100%;"
  @selection-change="selectChange"
  @row-click="handleCurrentChange"
  highlight-current-row
  :header-cell-style="headerCellStyle"
  :cell-style="cellStyle"
  :span-method="arraySpanMethod">
  <el-table-column type="selection" align="center" width="48"></el-table-column>
  <el-table-column type="index" label="序号" align="center" width="58">
    <template slot-scope="scope">
      <span v-if="scope.$index === tableData.length - 1">总计</span>
      <span v-else>{{scope.$index + 1}}</span>
    </template>
  </el-table-column>
  <el-table-column prop="matCode" label="编号" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column prop="planVal" label="采购量" width="120" :show-overflow-tooltip="true">
    <template slot-scope="scope">
      <el-input v-if="scope.row.isEdit && configVal === '0'"  v-model="scope.row.planVal" size="small" style="width: 100%;"  @focus="threeFocus(scope.$index)" @input="getTotlePrice"></el-input>
      <span v-else>{{scope.row.planVal}}</span>
    </template>
  </el-table-column>
  <el-table-column prop="totalPrice" label="金额" width="120" :show-overflow-tooltip="true">
    <template slot-scope="prop">
      <span>{{prop.row.totalPrice | formatNum2(2)}}</span>
    </template>
  </el-table-column>
  <el-table-column prop="puUnitDesc" label="单位" width="90">
    <template slot-scope="scope">
      <el-select v-if="scope.row.isEdit" size="small" v-model="scope.row.puUnitCode" filterable clearable style="width:100%;" @focus="threeFocus(scope.$index)" @change="threeChange">
        <el-option
          v-for="item in threeList"
          :key="item.baseCode"
          :label="item.baseName"
          :value="item.baseCode"
        >
        </el-option>
        <el-option><el-button type="text" @click="addbaseCode">新增</el-button></el-option>
      </el-select>
      <span v-else>{{scope.row.puUnitDesc}}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="80">
    <template slot-scope="scope">
      <el-tooltip class="tree-item" effect="dark" content="删除" placement="top">
        <el-button type="text" v-if="tableData.length > 0 && scope.$index !== tableData.length - 1" class="purchmanager-button-stop inlent" @click="deleteTable(scope.row, scope.$index)"></el-button>
      </el-tooltip>
    </template>
  </el-table-column>
</el-table>

2.在methods中：

methods: {
	// 表头
      headerCellStyle ({row, column, rowIndex, columnIndex}) {
        // 这里的row是个数组，记录了表头有多少条
        if (columnIndex !== row.length - 1) {
          return 'border-right: 1px solid #E3E6EF;box-sizing: border-box;'
        }
      },
      // 单元格
      // cellStyle ({row, column, rowIndex, columnIndex}) {
      //   if (columnIndex === 4) {
      //     return 'border-right: 1px solid #E3E6EF;box-sizing: border-box;'
      //   }
      //   // if (rowIndex === this.tableData.length - 1) {
      //   //   // 如果是最后一行合计行
      //   //   if (columnIndex === 5) {
      //   //     return 'color: #F3983E'
      //   //   }
      //   // }
      // },
      arraySpanMethod ({row, column, rowIndex, columnIndex}) {
      // if (rowIndex === this.tableData.length - 1) {
       //   // 如果是最后一行合计行,这个根据需求格子算
       //   if (columnIndex === 5) {
       //     return [1, 4];
       //   }
       // }
     },
     getList () {
        let _this = this
        _this.tableData = []
        _this.tabLoading2 = true
        let params = {}
        _this.axios.get('xxx/xxx/xxx', {params: params}).then(function (res) {
          if (res.data.code === '0') {
            let tableData = res.data.data
			// if (this.tableData.length > 0) {
	        //   let value = 0
	        //   for (var j = 0; j < this.tableData.length - 1; j++) {
	        //     if (!this.tableData[j].totalPrice) {
	        //       continue
	        //     }
	        //     value += Number(this.tableData[j].totalPrice)
	        //   }
	        //   value = formatNum2(value, 2)
	        //   // this.tableData[this.tableData.length - 1].totalPrice = '计划总额：￥' + value + '  (可用预算: ￥' + value + ')'
	        // }
         } else {
            _this.$message.error(res.data.message);
          }
        }).catch(function () {
          _this.tabLoading2 = false
        });
      },
}