1.? 添加 :span-method="objectSpanMethod"

?2.? 寫objectSpanMethod?方法

//#region  合并單元格
    // 這個方法是 element-ui提供的單元格合并方法
    // objectSpanMethod 傳入了 { row, column, rowIndex, columnIndex }
    // row: 當前行
    // column: 當前列
    // rowIndex：當前行號
    // columnIndex ：當前列號
    // 1代表：獨占一行
    // 更大的自然數：代表合并了若干行
    // 0：代表“消失”的哪那一個單元格，后面的單元格向前推一格
    mergeCol(id, rowIndex) {
      debugger;
      // 合并單元格
      // id：屬性名
      // rowIndex：行索引值
      var idName = this.TableData[rowIndex][id]; // 獲取當前單元格的值
      if (rowIndex > 0) {
        // 判斷是不是第一行
        // eslint-disable-next-line eqeqeq
        if (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) {
          // 先判斷當前單元格的值是不是和上一行的值相等
          var i = rowIndex;
          var num = 0; // 定義一個變量i，用于記錄行索引值并進行循環，num用于計數
          while (i < this.TableData.length) {
            // 當索引值小于table的數組長度時，循環執行
            if (this.TableData[i][id] === idName) {
              // 判斷循環的單元格的值是不是和當前行的值相等
              i++; // 如果相等，則索引值加1
              num++; // 合并的num計數加1
            } else {
              i = this.TableData.length; // 如果不相等，將索引值設置為table的數組長度，跳出循環
            }
          }
          return {
            rowspan: num, // 最終將合并的行數返回
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0, // 如果相等，則將rowspan設置為0
            colspan: 1,
          };
        }
      } else {
        // 如果是第一行，則直接返回
        let i = rowIndex;
        let num = 0;
        while (i < this.TableData.length) {
          // 當索引值小于table的數組長度時，循環執行
          if (this.TableData[i][id] === idName) {
            i++;
            num++;
          } else {
            i = this.TableData.length;
          }
        }
        return {
          rowspan: num,
          colspan: 1,
        };
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并單元格
      switch (
        columnIndex // 將列索引作為判斷值
      ) {
        // 通過傳遞不同的列索引和需要合并的屬性名，可以實現不同列的合并（索引0,1 指的是頁面上的0,1）
        // gzTroubles，gzID 這兩個字段是我要合并的字段名，
        case 1:
          return this.mergeCol("gzTroubles", rowIndex);
        case 0:
          return this.mergeCol("gzID", rowIndex);
      }
    },
    //#endregion

其中，switch中 0和1?是根據下面這張圖中的順序來的，

?完整代碼如下：

<template>
  <div class="pCindex">
    <el-table
      ref="tableRef"
      :data="TableData"
      class="tableStyle"
      :span-method="objectSpanMethod"
      border
    >
      <el-table-column
        align="center"
        prop="gzID"
        :label="lable.gzID"
        width="80"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="gzTroubles"
        :label="lable.gzTroubles"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        prop="gzReason"
        :label="lable.gzReason"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="gzWay"
        :label="lable.gzWay"
      ></el-table-column>
    </el-table>
   
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
     
    
      
      lable: {
        gzID: "序號",
        gzTroubles: "故障現象",
        gzReason: "故障原因",
        gzWay: "排除方法",
      },

      TableData: [
        {
          gzID: "1",
          gzTroubles: "發動機勝多負少的溫度過高",
          gzReason: "1.是的",
          gzWay: "1.打開上翻門",
        },
        {
          gzID: "1",
          gzTroubles: "發動機勝多負少的溫度過高",
          gzReason: "2.散熱風機有噪音",
          gzWay: "2.轉軸上加潤滑油",
        },
        {
          gzID: "2",
          gzTroubles: "發動機不能起動",
          gzReason: "1.電瓶電壓不足，接線柱松動或氧化",
          gzWay: "1.充電、打磨接頭并接牢",
        },
        {
          gzID: "3",
          gzTroubles: "發動機不等等能起動",
          gzReason: "2.燃油不足是否",
          gzWay: "2.加油或排氣",
        },
        
      ],
    };
  },
  watch: {},
  mounted() {},
  methods: {
    //#region  合并單元格
    // 這個方法是 element-ui提供的單元格合并方法
    // objectSpanMethod 傳入了 { row, column, rowIndex, columnIndex }
    // row: 當前行
    // column: 當前列
    // rowIndex：當前行號
    // columnIndex ：當前列號
    // 1代表：獨占一行
    // 更大的自然數：代表合并了若干行
    // 0：代表“消失”的哪那一個單元格，后面的單元格向前推一格
    mergeCol(id, rowIndex) {
      debugger;
      // 合并單元格
      // id：屬性名
      // rowIndex：行索引值
      var idName = this.TableData[rowIndex][id]; // 獲取當前單元格的值
      if (rowIndex > 0) {
        // 判斷是不是第一行
        // eslint-disable-next-line eqeqeq
        if (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) {
          // 先判斷當前單元格的值是不是和上一行的值相等
          var i = rowIndex;
          var num = 0; // 定義一個變量i，用于記錄行索引值并進行循環，num用于計數
          while (i < this.TableData.length) {
            // 當索引值小于table的數組長度時，循環執行
            if (this.TableData[i][id] === idName) {
              // 判斷循環的單元格的值是不是和當前行的值相等
              i++; // 如果相等，則索引值加1
              num++; // 合并的num計數加1
            } else {
              i = this.TableData.length; // 如果不相等，將索引值設置為table的數組長度，跳出循環
            }
          }
          return {
            rowspan: num, // 最終將合并的行數返回
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0, // 如果相等，則將rowspan設置為0
            colspan: 1,
          };
        }
      } else {
        // 如果是第一行，則直接返回
        let i = rowIndex;
        let num = 0;
        while (i < this.TableData.length) {
          // 當索引值小于table的數組長度時，循環執行
          if (this.TableData[i][id] === idName) {
            i++;
            num++;
          } else {
            i = this.TableData.length;
          }
        }
        return {
          rowspan: num,
          colspan: 1,
        };
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并單元格
      switch (
        columnIndex // 將列索引作為判斷值
      ) {
        // 通過傳遞不同的列索引和需要合并的屬性名，可以實現不同列的合并（索引0,1 指的是頁面上的0,1）
        case 1:
          return this.mergeCol("gzTroubles", rowIndex);
        case 0:
          return this.mergeCol("gzID", rowIndex);
      }
    },
    //#endregion
  },
};
</script>