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

?2.? 寫(xiě)objectSpanMethod?方法

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

其中，switch中 0和1?是根據(jù)下面這張圖中的順序來(lái)的，

?完整代碼如下：

<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: "序號(hào)",
        gzTroubles: "故障現(xiàn)象",
        gzReason: "故障原因",
        gzWay: "排除方法",
      },

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