一，實現效果

二，實現思路

首先確定3種資料 1，需要合併的列。2，以哪一列為基礎進行合併。3，受影響的列

三，程式碼展示

程式碼複製可直接檢視demo效果

<template>
  <div style="padding: 20px">
    <el-table :data="table" :span-method="objectSpanMethod" border>
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="
 
checkRoom" label="checkRoom"></el-table-column>
      <el-table-column
        prop="checkProject"
        label="checkProject"
      ></el-table-column>
      <el-table-column prop="checkMoney" label="checkMoney"></el-table-column>
      <el-table-column prop="attention
 
" label="attention"></el-table-column>
      <el-table-column
        prop="appointmentTime"
        label="appointmentTime"
      ></el-table-column>
    </el-table>
    <p>需要合併的列：checkRoom，checkMoney，attention，appointmentTime</p>
    <p>以哪列為基礎進行合併：checkRoom</p>
    <p>受影響的列：attention</p>
  </div>
</template>
<script>
export 
 
default {
  data() {
    return {
      table: [
        {
          id: "1",
          checkRoom: "CTROOM",
          checkProject: "頸椎MRICT",
          checkMoney: "300.22",
          attention: "檢查前空腹",
          appointmentTime: "",
        },
        {
          id: "1",
          checkRoom: "CTROOM",
          checkProject: "頸椎MRICT1",
          checkMoney: "303.22",
          attention: "檢查前空腹",
          appointmentTime: "",
        },
        {
          id: "1",
          checkRoom: "CTROOM",
          checkProject: "頸椎MRICT22",
          checkMoney: "340.22",
          attention: "檢查前空腹",
          appointmentTime: "2019-5-29 10:30",
        },
        {
          id: "1",
          checkRoom: "DR",
          checkProject: "鼻骨",
          checkMoney: "340.22",
          attention: "檢查前空腹",
          appointmentTime: "2019-5-29 9:30",
        },
      ],
    };
  },
  created() {
    // 給table賦值，重新遍歷新增rowSpan屬性，checkRoom，appointmentTime為table裡面需要合併的屬性名稱
    this.table = this.mergeTableRow({
      data: this.table,
      mergeColNames: [
        "checkRoom",
        "checkMoney",
        "attention",
        "appointmentTime",
      ], // 需要合併的列，預設合併列相同的資料
      firstMergeColNames: ["attention"], // 受影響的列，只合並以firstMerge為首的同類型資料
      firstMerge: "checkRoom", // 以哪列為基礎進行合併，一般為第一列
    });
    // 例如：如果firstMerge: 'checkRoom'合併了三行，受影響的列也應該是最多合併三行，請看下圖1
    // 例如：如果firstMerge: 'checkMoney'合併了兩行，受影響的列也應該是最多合併兩行，請看下圖2
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    mergeTableRow(config) {
      let data = config.data;
      const { mergeColNames, firstMergeColNames, firstMerge } = config;
      // 沒有需要合併的列，直接返回data
      if (!mergeColNames || mergeColNames.length === 0) {
        return data;
      }

      mergeColNames.forEach((m) => {
        //遍歷需要合併的列
        const mList = {};
        data = data.map((v, index) => {
          const rowVal = v[m]; //每行對應合併列的值
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            const flag =
              firstMergeColNames.filter((f) => {
                return f === m;
              }).length !== 0;
            const mcFlag =
              mergeColNames.filter((mc) => {
                return mc === firstMerge;
              }).length === 0;
            if (
              (mcFlag && flag) ||
              (flag &&
                data[index][firstMerge + "-span"] &&
                data[index][firstMerge + "-span"].rowspan === 1)
            ) {
              v[m + "-span"] = {
                rowspan: 1,
                colspan: 1,
              };
            } else {
              data[mList[rowVal]["index"]][m + "-span"].rowspan++;
              v[m + "-span"] = {
                rowspan: 0,
                colspan: 0,
              };
              mList[rowVal]["num"]++;
              mList[rowVal]["newIndex"]++;
            }
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };
            v[m + "-span"] = {
              rowspan: 1,
              colspan: 1,
            };
          }
          return v;
        });
      });
      return data;
    },
  },
};
</script>

參考別人部落格，侵刪