elementui表格多行合並，且序號處理

重點在js部分, 此文一個是記錄elementui表格多行合並，第二個是記錄合並后序號如何顯示，如果序號不處理，那可能就是1，3，7，9......等這樣的，只有處理之后才是1，2，3，4.....這樣的。最后面是圖，可以看效果。

html部分寫的比較簡略，

<el-table  :data="tempTableData" height="800px"  :span-method="objectSpanMethod" style="width: 100%;" border>
        <el-table-column prop="Nosort" label="充電記錄" min-width="60px"></el-table-column>
        <el-table-column prop="type" label="充電類型" min-width="65px">
          <template slot-scope="scope">
            <span v-if="scope.row.fastCharge == 1">快充</span>
            <span v-else>慢充</span>
          </template>
        </el-table-column>
        <el-table-column prop="chargeStartTime" label="充電開始時間" min-width="130px"></el-table-column>
        <el-table-column prop="chargeEndTime" label="充電結束時間" min-width="130px"></el-table-column>
        <el-table-column prop="chargeStartSoc" label="充電開始電量（%）" min-width="80px"></el-table-column>
        <el-table-column prop="chargeEndSoc" label="充電結束電量（%）" min-width="80px"></el-table-column>
        <el-table-column prop="environment_temperature" label="環境溫度（℃）" width="80px"></el-table-column>
        <el-table-column prop="rangeSoc" label="電量（%）" min-width="80px">
          <template slot-scope="scope">
            <span >{{scope.row.rangeSoc}}</span>
          </template>
        </el-table-column>
        <el-table-column label="時長（分鍾）" width="100px">
            <el-table-column  prop="singleChargeTime" label="計算值" >
              <template slot-scope="scope">
                <span >{{scope.row.singleChargeTime}}</span>
              </template>
            </el-table-column>
            <el-table-column  prop="referenceChargeTime" label="參考值" >
              <template slot-scope="scope">
                <span >{{scope.row.referenceChargeTime}}</span>
              </template>
            </el-table-column>
        </el-table-column>
    </el-table>

 

data(){
    return {
        tempTableData: [],
        tableArr: [],
        tablePos: 0
    }
}
methods: {
    getData(){
    // 把需要合並行的歸類, this.tempTableData是表格數據
    this.tableArr = []
    this.tablePos = 0
    for (var i = 0; i < this.tempTableData.length; i++) {
        if (i === 0) {
            // 第一行必須存在
            this.tableArr.push(1)
            this.tablePos = 0
        } else {
            if (this.tempTableData[i].sign === this.tempTableData[i - 1].sign) {
                this.tableArr[this.tablePos] += 1
                this.tableArr.push(0)
            } else {
                this.tableArr.push(1)
                this.tablePos = i
            }
        }
    }
    // 表格序號
    let Nosort = 0
    for(let n in this.tableArr){
        if(this.tableArr[n]>0){
            Nosort += 1
            this.$set(this.tempTableData[n],'Nosort',Nosort)
        }
    }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 || columnIndex === 4 ||columnIndex === 5 || columnIndex === 6

 || columnIndex === 14 || columnIndex === 15

      ) {
        // 第一列的合並方法,省
        const row1 = this.tableArr[rowIndex]
        const col1 = row1 > 0 ? 1 : 0 // 如果被合並了_row=0則它這個列需要取消
        return {
          rowspan: row1,
          colspan: col1
        }
      }
    },
}