一、場景

根據介面返回資料，將ID相同的資料進行合併。

el-table自帶的方法可以固定的合併，但是不能夠隨機分。

二、思路

通過新增 :span-method="objectSpanMethod" 來自定義合併規則。

 <el-table
      :data="tableData"
      :span
 
-method="objectSpanMethod">

      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="數值 1（元）">
      </el-table-column>
      <el-table-column
        prop
 
="amount2"
        label="數值 2（元）">
      </el-table-column>
    </el-table>
  </div>
</template>

 methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //row:物件形式，儲存了當前行的資料
      //column：物件形式，儲存了當前列的引數
      //rowIndex:當前行的行號
      //column：當前列的列號
        if
 
 (columnIndex === 0) {
          if (rowIndex % 2 === 0) { //%：表示從多少(行)到多少(行)進行合併
            return {
              rowspan: 2, //rowspan:單元格可橫跨的行數
              colspan: 1 //colspan:單元格可橫跨的列數
            };
          } else {
            return {
              rowspan: 0, //等於0表示不合並
              colspan: 0
            };
          }
        }
      }
    }

三、資料處理

 tableData: [{
          id: '12987122',
          name: '張三',
          amount1: '234',
          amount2: '8',
        }, {
          id: '12987123',
          name: '王李四',
          amount1: '165',
          amount2: '9',
        }]

四、表格合併方法

objectSpanMethod中寫的是合併規則。在這之前先找出需要合併的單元格。

通過getSpanArr(),該方法需要加在頁面渲染之前獲取列表資料的方法中並傳入列表需要渲染的資料作為引數。

//因為要合併的行數是不固定的，此函式實現隨意合併行數的功能

getSpanArr（）{
　　this.indexList.forEach((item, index) => {
        if (index === 0) {
          //如果是第一條資料，向陣列中加1，佔住位置
          this.spanArr.push(1)  
          this.position = 0
        } else {
          if (this.indexList[index].parentId === this.indexList[index - 1].parentId) {
            //如果parentId相同, 合併行數加1，
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            //陣列後移1位
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
}

//實現parentId相同的值合併

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },