el-table 在第一行添加合计行和操作按钮

1、预计效果如下

2、前端及样式部分

1）el-table

2）合计的位置设置、按钮添加

// 合计行设置
showSummariesPosition () {
  // 合计行显示在表头
  let table = document.querySelector('.el-table')
  let footer = document.querySelector('.el-table__footer-wrapper')
  let body = document.querySelector('.el-table__body-wrapper')
  table.removeChild(footer)
  table.insertBefore(footer, body)
  // 在合计行的最后一列添加按钮
  let html = table.querySelectorAll('td')[5].querySelector('.cell')
  html.innerHTML = "查看"
  html.onclick = () => {
    this.toAllDetails()
  }
},

3）mounted周期初始化加载

mounted () {
  this.$nextTick(() => {
    this.showSummariesPosition()
  })
},

至此，效果实现如本文开篇所示效果图

以上就是el-table 在第一行添加合计行和操作按钮的介绍，做此记录，如有帮助，欢迎点赞关注收藏！