合并單元格，如果id列值一致所灸，則合并

原理

1侠驯、getSpanArr(data)方法 data就是我們從后臺拿到的數(shù)據(jù)，通常是一個數(shù)組；
2权谁、spanArr是一個空的數(shù)組采章，用于存放每一行記錄的合并數(shù)奋救；
3背亥、 pos是spanArr的索引寄锐。
如果是第一條記錄（索引為0）沿癞，向數(shù)組中加入１，并設(shè)置索引位置；
如果不是第一條記錄峦椰，則判斷它與前一條記錄是否相等色解，
如果相等冒签，則向spanArr中添入元素0，并將前一位元素＋１，表示合并行數(shù)＋１屹徘，
以此往復(fù)，得到所有行的合并數(shù)鉴吹，0即表示該行不顯示

<template>
  <div style="padding:20px">
    <el-table :data="tableData6" :span-method="objectSpanMethod" border >
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="amount1" label="數(shù)值 1（元）"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanArr: [],//用于存放每一行記錄的合并數(shù)
      tableData6: [
        {
          id: "1",
          name: "王小虎",
          amount1: "234"
        },
        {
          id: "1",
          name: "王小虎",
          amount1: "165"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "324"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "621"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "539"
        }
      ]
    };
  },
  mounted: function() {
    this.getSpanArr(this.tableData6);
  },
  methods: {
    getSpanArr(data) {
        // data就是我們從后臺拿到的數(shù)據(jù)
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判斷當(dāng)前元素與上一個元素是否相同
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        console.log(this.spanArr);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示這一行不顯示嫩痰， [2,1]表示行的合并數(shù)
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>

最終顯示效果

image.png

備注：
本示例參考自他人https://www.cnblogs.com/mmzuo-798/p/11686021.html