分享element UI table 多行合计合并

需求：实现表格的多行合计，并且合并每行数据。

最终方案：通过获取表格dom，向table追加一行总计。

onMounted(async () => {
  await reviewRecordInfo(route.query.id)
  setTimeout(() => {
    if (tableExcelRef.value) {
      if (tableExcelRef.value.tableRef?.$el) {
        let tabelRef = tableExcelRef.value?.tableRef.$el
          .querySelector('.el-table__footer-wrapper')
          .querySelector('.el-table__footer')

        const subTotalEl = tabelRef.rows[0]

        // 标题合并列数
        const COLNUM = 5

        // 插入总计行
        const totalRow = tabelRef.insertRow(tabelRef.rows.length)
        for (let index = 0; index < subTotalEl.cells.length; index++) {
          const column = totalRow.insertCell(index)
          column.setAttribute('class', 'el-table__cell el-table_5_column_33 is-left is-leaf')
          if (index === 0) {
            column.innerHTML = `<div class="cell">总计</div>`
          } else if (index === COLNUM) {
            //TODO 此处塞合计值
            column.innerHTML = `<div class="cell">${form.value?.pcBo?.sumScore}</div>`
          } else {
            column.innerHTML = ''
          }
        }

        // 合并 小计行
        subTotalEl.cells[0].colSpan = '5'
        subTotalEl.cells[0].style.textAlign = 'center'
        for (let index = 1; index < COLNUM; index++) {
          subTotalEl.cells[index].style.display = 'none'
        }

        // 合并 总计行
        const totalEl = tabelRef.rows[1]
        totalEl.cells[0].colSpan = COLNUM
        totalEl.cells[0].style.textAlign = 'center'
        totalEl.cells[5].colSpan = totalEl.cells.length - COLNUM
        totalEl.cells[5].style.textAlign = 'center'
        for (let index = 1; index < COLNUM; index++) {
          totalEl.cells[index].style.display = 'none'
        }
      }
    }
  }, 0)
})

另外推荐一个比较好用的table库，支持各种复杂表格实现 gitee.com/xuliangzhan…