該邏輯涉及各列之間的相互依賴關(guān)系，例如：第2列的合并，是在第1列滿足的基礎(chǔ)上，在判斷第二列是否滿足合并條件，依次類推...
html:

<el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <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-column prop="amount2" label="數(shù)值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="數(shù)值 3（元）"> </el-table-column>
    </el-table>

js:

export default {
  data() {
    return {
      // 模擬后臺(tái)返回?cái)?shù)據(jù)
      tableData: [
        {
          id: "12987122",
          name: "王大虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王大虎",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987122",
          name: "王二虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987123",
          name: "王二虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987123",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987123",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
      // 需要合并項(xiàng)的列
      needMergeArr: [
        {
          colName: "id",
          mergeCheckNames: ["id"],
        },
        {
          colName: "name",
          mergeCheckNames: ["id","name"],
        },
      ], 
      rowMergeArrs: {}, // 包含需要一個(gè)或多個(gè)合并項(xiàng)信息的對(duì)象
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      let needMerge = this.needMergeArr.some((item) => {
        return item.colName === column.property;
      });
      if (needMerge === true) {
        return this.mergeAction(column.property, rowIndex, column);
      }
    },
    mergeAction(val, rowIndex, colData) {
      let _row = this.rowMergeArrs[val].rowArr[rowIndex];
      let _col = _row > 0 ? 1 : 0;
      return [_row, _col];
    },
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false;
      if (!Array.isArray(data) && !data.length) return false;
      let needMerge = {};

      arr.forEach((mergeItem) => {
        // 創(chuàng)建合并管理對(duì)象
        needMerge[mergeItem.colName] = {
          rowArr: [],
          rowMergeNum: 0,
        };
        let currentMergeItemData = needMerge[mergeItem.colName];

        // 進(jìn)行合并管理對(duì)象數(shù)據(jù)的遍歷整理
        data.forEach((item, index) => {
          if (index === 0) {
            currentMergeItemData.rowArr.push(1);
            currentMergeItemData.rowMergeNum = 0;
          } else {
            let currentRowData = data[index];
            let preRowData = data[index - 1];

            if (this.colMergeCheck(currentRowData,preRowData,mergeItem.mergeCheckNames)) {
              currentMergeItemData.rowArr[currentMergeItemData.rowMergeNum] += 1;
              currentMergeItemData.rowArr.push(0);
            } else {
              currentMergeItemData.rowArr.push(1);
              currentMergeItemData.rowMergeNum = index;
            }
          }
        });
      });
      return needMerge;
    },
    colMergeCheck(currentRowData, preRowData, mergeCheckNames) {
      if (!Array.isArray(mergeCheckNames) && !mergeCheckNames.length) return false;
      let result = true;
      for (let index = 0; index < mergeCheckNames.length; index++) {
        const mergeCheckName = mergeCheckNames[index];
        if (currentRowData[mergeCheckName] !== preRowData[mergeCheckName]) {
          result = false;
          break;
        }
      }
      return result;
    },
  },
  mounted() {
    // 處理數(shù)據(jù),如有分頁(yè)需要，此行放在加載數(shù)據(jù)成功之后
    this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); 
  },
};

正確的合并效果如圖所示：

image.png

各列之間無(wú)關(guān)系的合并如下圖所示：

image.png

此代碼修改基于該作者的分享，感謝：
參考原文連接：http://www.lxweimin.com/p/c1a6ef55f424