转载自：https://blog.csdn.net/weixin_40863414/article/details/102541258

<template>
  <el-table :data="tableData" ref='table' border style="width: 100%">
    <el-table-column prop="id" label="ID" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名">
    </el-table-column>
    <el-table-column prop="amount1" label="数值 1">
    </el-table-column>
    <el-table-column prop="amount2" label="数值 2">
    </el-table-column>
    <el-table-column prop="amount3" label="数值 3">
    </el-table-column>
    <div slot="append">
      <div class='sum_footer xiaoji' ref='sum_xiaoji'>
        <div class='sum_footer_unit center'>小计</div>
        <div class='sum_footer_unit'></div>
        <div class='sum_footer_unit'>{{getXiaoji('amount1')}}</div>
        <div class='sum_footer_unit'>{{getXiaoji('amount2')}}</div>
        <div class='sum_footer_unit'>{{getXiaoji('amount3')}}</div>
      </div>
      <div class='sum_footer' ref='sum_heji'>
        <div class='sum_footer_unit center'>合计</div>
        <div class='sum_footer_unit'></div>
        <div class='sum_footer_unit'>{{getXiaoji('amount1')}}</div>
        <div class='sum_footer_unit'>{{getXiaoji('amount2')}}</div>
        <div class='sum_footer_unit'>{{getXiaoji('amount3')}}</div>
      </div>
    </div>
  </el-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        name: '王小虎',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987124',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '12987126',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }]
    }
  },
  methods: {
    adjustWidth () {
      this.$nextTick(() => {
        if (this.$refs && this.$refs.sum_xiaoji && this.$refs.sum_heji && this.$refs.table && this.$refs.table.$refs.headerWrapper) {
          var width = getComputedStyle(this.$refs.table.$refs.headerWrapper.querySelector('table')).width
          this.$refs.sum_xiaoji.style = 'width:' + width
          this.$refs.sum_heji.style = 'width:' + width
          Array.from(this.$refs.table.$refs.headerWrapper.querySelectorAll('col')).forEach((n, i) => {
            if (this.$refs.sum_xiaoji.children[i]) {
              this.$refs.sum_xiaoji.children[i].style = 'width:' + n.getAttribute('width') + 'px'
              this.$refs.sum_heji.children[i].style = 'width:' + n.getAttribute('width') + 'px'
            }
          })
        }
      })
    },
    getXiaoji (name) {
      var sum = 0
      this.tableData.forEach((n, i) => {
        sum += parseFloat(n[name])
      })
      return sum
    }
  },
  mounted () {
    this.adjustWidth()
    window.addEventListener('resize', this.adjustWidth.bind(this))
  }
}
</script>
<style>
  .sum_footer {
    display: flex;
    display: -webkit-flex;
    line-height: 50px;
    color: #606266;
  }

  .sum_footer_unit {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    text-indent: 10px;
    font-size: 14px;
  }

  .sum_footer_unit.center {
    text-align: center;
  }

  .sum_footer.xiaoji {
    border-bottom: 1px solid #EBEEF5;
  }
</style>