el-table 全部表格数据合计

elemnt-ui中的el-table表格使用属性show-summary可以计算当前展示页所有数据的合计，项目要求计算全部的数据并展示在第一页，show-summary无法满足这一条件，如何做？

// 我这里采用的是document.querySelector找到tbody通过insertAdjacentHTML插入数据
// 注意所有数据合计是通过后端计算返回到前端的
   const total = document.getElementById('total')
   const tbody = document.querySelector('tbody')
   tbody.insertAdjacentHTML('beforeend', `
    <tr id="total" class="el-table__row ">
            <td rowspan="1" colspan="1" class="el-table_1_column_1 is-center  el-table__cell">
              <div class="cell">合计</div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_1_column_2_column_3 is-center  el-table__cell">
              <div class="cell">${合计一}</div>
            </td> 
    </tr>`) }

这样写无论分页数据如何切换他始终会插入到最后一行进行所有数据的计算

// 添加一个判断 如果total存在则删除 避免切换一直添加
 if (total) {
     total.remove()
  }

这里如果想要添加带状态表格

  // 可以找到this.tableData(所有表格数据) 进行判断是否添加el-table__row--striped属性
  const clazz = (this.tableData.length + 1) % 2 === 0 ? 'el-table__row--striped' : ''
  <tr id="total" class="el-table__row ${clazz}">
            <td rowspan="1" colspan="1" class="el-table_1_column_1 is-center  el-table__cell">
              <div class="cell">合计</div>
            </td>
  </tr>     

完整代码

   const total = document.getElementById('total')
          console.log(total)
          if (total) {
            total.remove()
          }

          if (this.tableData.length) {
            const clazz = (this.tableData.length + 1) % 2 === 0 ? 'el-table__row--striped' : ''
            console.log(this.tableData.length)
            const tbody = document.querySelector('tbody')
            tbody.insertAdjacentHTML('beforeend', `
    <tr id="total" class="el-table__row ${clazz}">
            <td rowspan="1" colspan="1" class="el-table_1_column_1 is-center  el-table__cell">
              <div class="cell">合计</div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_1_column_2_column_3 is-center  el-table__cell">
              <div class="cell">${res.result.total}</div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_1_column_2_column_4 is-center  el-table__cell">
              <div class="cell">${res.result.electricity}</div>
            </td>
    </tr>`)
          }