如何合并el-table的行和列?

// 对表格数据进行处理,找出需要合并的单元格
getSpanArr(data) {
    
    
  this.count = []
  if (data === null) return
  for (let i = 0; i < data.length; i++) {
    
    
    if (i === 0) {
    
    
      this.count.push(1)
      this.pos = 0
    } else {
    
    
      if (data[i].unite_hash === data[i - 1].unite_hash) {
    
    
        this.count[this.pos] += 1
        this.count.push(0)
      } else {
    
    
        this.count.push(1)
        this.pos = i
      }
    }
  }
},
objectSpanMethod({
     
      row, column, rowIndex, columnIndex }) {
    
    
  if ([11].includes(columnIndex)) {
    
     // 这个数组是需要合并的列的索引
    const _row = this.count[rowIndex] // 从处理完的数组里获取
    const _col = _row > 0 ? 1 : 0
    return {
    
    
      rowspan: _row,
      colspan: _col
    }
  }
},
// 在请求数据接口的成功回调中执行它
getSpanArr(tableData)
<el-table
   :data="tableData"
   :span-method="arraySpanMethod"
   border
   style="width: 100%">
</el-table>

猜你喜欢

转载自blog.csdn.net/weixin_41535944/article/details/128644743