el-table 两种合并行的方法cell-style与span-method

一种是用cell-style ， 通过样式合并， 这样相当于用css，隐藏下面的单元格，上面的单元格不会居中

 <el-table
    :data="optimizerTableData"
    :cell-style="cellStyle"
>
      <el-table-column prop="name" label="deviceName" width="180"> </el-table-column>
      <el-table-column prop="name" label="deviceName" width="180"> </el-table-column>
      <el-table-column prop="name" label="deviceName" width="180"> </el-table-column>
      <el-table-column prop="name" label="deviceName" width="180"> </el-table-column>
      <el-table-column prop="name" label="deviceName" width="180"> </el-table-column>
 </el-table>
 

cellStyle({ row, column, rowIndex, columnIndex }) {
     // 后面:cell-style="cellStyle"变更为:span-method="mergeRowMethod"
     //  相同列数据，只显示第一行，后面不显示，而不是合并
     const cssArr = this.dealCss()
     console.log('log--> ', cssArr)

     for (let i = 0; i < cssArr.length; i++) {
       if (
         rowIndex === cssArr[i] &&
         // 这里表示有多列要合并
         (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)
       ) {
         return 'color: transparent;user-select:none;'
       }
     }
   },
   dealCss() {
     // 处理多列重复时，不合并只显示第一行
     const cssArr = []
     for (let i = 0; i < this.optimizerTableData.length; i++) {
       if (
         i > 0 &&
         this.optimizerTableData[i].deviceName ===
           this.optimizerTableData[i - 1].deviceName
       ) {
         cssArr.push(i)
       }
     }
     return cssArr
   },

一种使用span-method 合并后会居中

<el-table
    :data="tableControlList"
    :span-method="objectSpanMethod"
>
      <el-table-column prop="name" label="deviceNo" width="180"> </el-table-column>
      <el-table-column prop="name" label="deviceNo" width="180"> </el-table-column>
      <el-table-column prop="name" label="deviceNo" width="180"> </el-table-column>
      <el-table-column prop="name" label="deviceNo" width="180"> </el-table-column>
 </el-table>
 

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
 // 合并行
 if (columnIndex === 0 || columnIndex === 1) {
   // 第一列
   const _row = this.mergingRows[rowIndex]
   const _col = _row > 0 ? 1 : 0
   return {
     rowspan: _row,
     colspan: _col
   }
 }
},

mergingRows() {
 // 表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
 // 如果是第一条记录（索引为0），向数组中加入1，并设置索引位置；
 // 如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，
 // 则向mergingRows中添入元素0，并将前一位元素+1，表示合并行数+1，
 // 以此往复，得到所有行的合并数，0即表示该行不显示。
 const mergingRows = []
 let mergingPos = 0
 for (let i = 0; i < this.tableControlList.length; i++) {
   // tableControlList 表格数据源
   if (i === 0) {
     mergingRows.push(1)
     mergingPos = 0
   } else {
     if (
       this.tableControlList[i].deviceNo ===
       this.tableControlList[i - 1].deviceNo
     ) {
       // 哪些数据是要合并的 合并的条件是什么 此处合并条件为deviceNo 相同则进行合并
       mergingRows[mergingPos] += 1
       mergingRows.push(0)
     } else {
       mergingRows.push(1)
       mergingPos = i
     }
   }
 }
 return mergingRows
}