使用element框架中el-tabel合并某行中某几列数据

使用element框架中el-tabel合并某行中某几列数据

技术细节

<el-table :data="tableData" border class="tableClass" ref="tableRef" max-height="660" :span-method="arraySpanMethod"></el-table>

方法一:

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex == 0) {
    if (columnIndex == 0) {
      return [1, 14]
    } else if ([1,2,3,4,5,6,7,8,9,10,11,12,13].includes(columnIndex)) {
      return [0, 0]
    }
  }
}

方法二：

nextTick(()=>{
   if(tableRef.value && tableData.value.length>1){
       const firstRow = tableRef.value.$el.querySelector('.el-table__row');
       const tds = firstRow.querySelectorAll('td');
       if (tds.length) {
          tds[0].colSpan =11
          tds[0].style.textAlign='center';
          for (let i = 1; i < 11; i++) {
            tds[i].style.display = 'none'
          }
        }
      }
 })