【vue+el-table】合并列，span-method方法实现，合并相同列名或相同id

效果

实现

<el-table
                ref="offroomTable"
                border
                :header-cell-style="{ 'text-align': 'center', background: '#b1defd', height: '34px' }"
                :data="offroomTableList"
                :highlight-current-row="true"
                :height="screenHeight - 430"
                :span-method="arraySpanMethod"
                
              >
                <el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="proCode" />
                <el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="proName" />
                <el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="ratifyYear" />
                <el-table-column label="说明" :show-overflow-tooltip="true" align="center" prop="conUnit" />
              </el-table>

   offroomTableList: [
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
      ],

代码注解：
首先要判断是哪一列要进行合并，第一列要合并，所以列索引为0

const _row = this.getSpanArr(this.offroomTableList).one[rowIndex]
然后要处理索引，用this.getSpanArr方法处理原数组，.one[rowIndex]是处理后返回的是一个对象，里面是个数组 {one：[6,0,0,0,0,0,0]}
rowspan代表跨多少行合并
colspan代表跨多少列合并

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {      
        const _row = this.getSpanArr(this.offroomTableList).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },

定义一个空数组和索引为0的字段
循环数组，索引为0 的时候往数组里push一个1，这段代码不用去改,把else里item.proCode改成你自己的字段就可以了

当走else里的代码时，如果当前行和上一行的proCode的值相同，数组第0项循环+1

这里要解释一下，拿效果图示例，第一列有6行，索引为0 的时候push了一个1,也就是第0项的值为1，=>[{0:1}]

索引为1，也就是第二行的时候，第二行的proCode和上一行的proCode相同，第0项再加1，并且push一个0，
这个时候的数组是这样的，=>[{0:2},{1:0}],按这样循环完之后，数组也就是这样了，=>[{0:6},{1:0}，{2：0}，{3：0}，{4：0}，{5：0}]
（为了方便大家理解，写成这样，第[index]项对应第[index]项的值，真正的数组是[6,0,0,0,0,0]）

如果当前项和上一项不一样，就push1，代表不被合并，独立占一行
最后讲这个数组返回，给它定义了一个名字one
希望解释的还算通俗，好理解，不清楚的可以随时问，欢迎

getSpanArr(arr) {
      if (arr) {
        const spanOneArr = []
        let concatOne = 0
        arr.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1)
          } else {        
            if (item.proCode === arr[index - 1].proCode) {
              // 第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }
          }
        })
        return { one: spanOneArr }
      }
    },