ElementUI el-table 的自定义合计行及自定义合并单元格_el-table 自定义行

1.html代码

      <el-table :data="tableData" border style="width: 100%" :span-method="handleSpanMethod" ref="table" :summary-method="summaryTotal" show-summary height="63vh">
        <el-table-column prop="companyName" label="物业公司" width=""></el-table-column>      
        <el-table-column prop="organName" label="管理区" width=""></el-table-column>      
        <el-table-column prop="houseName" label="楼栋"> </el-table-column>
        <el-table-column prop="resourceName" label="房间"> </el-table-column>
        <el-table-column prop="paymentDate" label="收款日期"> </el-table-column>
        <el-table-column prop="receiptNo" label="收款单号"> </el-table-column>
        <el-table-column prop="standardName" label="收费标准"> </el-table-column>
        <el-table-column prop="customerName" label="客户名称"> </el-table-column>
        <el-table-column prop="createByName" label="收款人"> </el-table-column>
        <el-table-column prop="actualAmount" label="实收金额"> </el-table-column>
        <el-table-column prop="discountAmount" label="优惠金额"> </el-table-column>
        <el-table-column prop="" label="冲抵金额"> </el-table-column>
        <el-table-column prop="" label="单据状态"> </el-table-column>
      </el-table>

2.js部分代码

    //自定义表格合计行
    summaryTotal(param){
       let sums = []
       sums[0] = '合计'
       sums[9] = this.sumDetails.actualAmount
       sums[10] = this.sumDetails.discountAmount
       console.log('nums',sums);
       return sums
 
    },
     
 
     //合并单元格的逻辑
      //此表格有5列需要合并的，所以这里有5个数组
    getSpanArr() {
      this.tableOneArr = [];
      this.tableOnePos = 0;
      this.tableTwoArr = [];
      this.tableTwoPos = 0;
      this.tableThreeArr = [];
      this.tableThreePos = 0;
      this.tableFourArr = [];
      this.tableFourPos = 0;
      this.tableFiveArr = [];
      this.tableFivePos = 0;
 
 
      for (var i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          // 第一行必须存在
          this.tableOneArr.push(1);
          this.tableOnePos = 0;
          this.tableTwoArr.push(1);
          this.tableTwoPos = 0;
          this.tableThreeArr.push(1);
          this.tableThreePos = 0;
          this.tableFourArr.push(1);
          this.tableFourPos = 0;
          this.tableFiveArr.push(1);
          this.tableFivePos = 0;
 
        } else {
          // 判断当前元素与上一个元素是否相同
          if (this.tableData[i].companyCode === this.tableData[i - 1].companyCode) {
            this.tableOneArr[this.tableOnePos] += 1;
            this.tableOneArr.push(0);
          } else {
            this.tableOneArr.push(1);
            this.tableOnePos = i;
          }
                   // 判断当前元素与上一个元素是否相同
          if (this.tableData[i].organName === this.tableData[i - 1].organName) {
            this.tableTwoArr[this.tableTwoPos] += 1;
            this.tableTwoArr.push(0);
          } else {
            this.tableTwoArr.push(1);
            this.tableTwoPos = i;
          }
                    // 判断当前元素与上一个元素是否相同
          if (this.tableData[i].houseCode === this.tableData[i - 1].houseCode) {
            this.tableThreeArr[this.tableThreePos] += 1;
            this.tableThreeArr.push(0);
          } else {
            this.tableThreeArr.push(1);
            this.tableThreePos = i;
          }
                    // 判断当前元素与上一个元素是否相同
          if (this.tableData[i].resourceCode === this.tableData[i - 1].resourceCode) {
            this.tableFourArr[this.tableFourPos] += 1;
            this.tableFourArr.push(0);
          } else {
            this.tableFourArr.push(1);
            this.tableFourPos = i;
          }
                    // 判断当前元素与上一个元素是否相同
          if (this.tableData[i].paymentDate === this.tableData[i - 1].paymentDate) {
            this.tableFiveArr[this.tableFivePos] += 1;
            this.tableFiveArr.push(0);
          } else {
            this.tableFiveArr.push(1);
            this.tableFivePos = i;
          }
 
        }
      }
 
     },
 
 
    //动态合并行
    handleSpanMethod({ row, column, rowIndex, columnIndex }){
        // 第一列的合并方法,省
         if (columnIndex == 0 ) {
            const _row = this.tableOneArr[rowIndex]
            const _col = _row > 0 ? 1 : 0 // 如果被合并了_row=0则它这个列需要取消
            return {
              rowspan: _row,
              colspan: _col
            }
         }
         else if (columnIndex == 1 ) {
            const _row = this.tableTwoArr[rowIndex]
            const _col = _row > 0 ? 1 : 0 // 如果被合并了_row=0则它这个列需要取消
            return {
              rowspan: _row,
              colspan: _col
            }
         }else if (columnIndex == 2 ) {
            const _row = this.tableThreeArr[rowIndex]
            const _col = _row > 0 ? 1 : 0 // 如果被合并了_row=0则它这个列需要取消
            return {
              rowspan: _row,
              colspan: _col
            }
         }else if (columnIndex == 3 ) {
            const _row = this.tableFourArr[rowIndex]
            const _col = _row > 0 ? 1 : 0 // 如果被合并了_row=0则它这个列需要取消
            return {
              rowspan: _row,
              colspan: _col
            }
         }else if (columnIndex == 4 ) {
            const _row = this.tableFiveArr[rowIndex]
            const _col = _row > 0 ? 1 : 0 // 如果被合并了_row=0则它这个列需要取消
            return {
              rowspan: _row,
              colspan: _col
            }
         }
    },
 

3.注意

 这里我表格使用了heigth="63vh",固定了高度，开启合并行的时候合并行没有显示出来，需要给表格加上 ref="table'，再在生命周期update函数里加上以下代码

      updated (){
        this.$nextTick( () => {
            this.$refs['table'].doLayout()
        })
       },