VUE项目中el-table动态合并列单元格（附带代码解析注释）

	<el-table :data="tableData" :span-method="objectSpanMethod" show-summary :summary-method="getSummaries" border style="width: 100%; margin-top: 10px">
      <el-table-column prop="systemOname" label="一级指标" align="center">el-table-column>
      <el-table-column prop="systemTname" label="二级指标" align="center">el-table-column>
      <el-table-column prop="systemName" label="三级指标" width="180" align="center">el-table-column>
      <el-table-column prop="selfAss" label="自评得分" align="center">el-table-column>
	  <el-table-column prop='expertCode' label="专家评估" align="center">
          <template slot-scope="scope">
          <span>
            <el-input v-model="scope.row.expertCode" size="mini" placeholder="请输入" />
          span>
          template>
       el-table-column>
       <el-table-column prop="exOpinion" label="专家意见" width="150" align="center">
          <template slot-scope="scope">
          <span>
            <el-input v-model="scope.row.exOpinion" size="mini" placeholder="请输入" />
          span>
          template>
       el-table-column>
    el-table>       

  mergeCol(id, rowIndex) { // 合并单元格
    // 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
        }
      }
    },

  // 这个方法是 element-ui提供的单元格合并方法
// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
// row: 当前行
// column: 当前列
// rowIndex：当前行号
// columnIndex ：当前列号
// 1代表：独占一行
// 更大的自然数：代表合并了若干行
// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
    
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
      switch (columnIndex) { // 将列索引作为判断值
      // 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并
        case 0:
          return this.mergeCol('pname', rowIndex)
        case 1:
          return this.mergeCol('pname', rowIndex)
        case 2:
          return this.mergeCol('pname', rowIndex)
      }
    },