手写合计行代替elementui自带的合计功能解决合计行在横向滚动条下方的问题

前言

这段时间做后台管理项目,涉及到element表格的合计功能,但是当出现横向滚动条的时候发现合计一行在滚动条的下方,不符合产品需求.百度了一下,网上好多处理方案,基本上都是修改样式,如下面的代码:

.el-table {
   overflow: auto;
}
 .el-table--scrollable-x .el-table__body-wrapper {
   overflow-x: visible;
 }
 .el-table__body-wrapper,
 .el-table__header-wrapper,
 .el-table__footer-wrapper {
   overflow: visible;
 }
 .el-table::after {
   position: relative !important;
 }

虽然这样也可以解决.但是,如果要求固定列的话,就会出现固定列和合计错位.还是解决不了问题.
然后就自己手写一个合计行,解决问题.上代码

<template>
  <div>
        <table-item :tableData="tableData" :col="col"></table-item>
  </div>
</template>
<script>
import tableItem from "./tableItem";
export default {
  name: "TableView",
  components: {
    tableItem,
  },
  data() {
    return {
      //树型结构表头数据
      col: [
        {
          prop: "date",
          label: "订单日期",
        },
        {
          l