el-table 合并单元格（合并行）_el-table合并单元格

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>