Element-UI之table 合计行在滚动条下方-兼容fixed的解决办法

源码中通过js控制的,需要重写js的方法,完整事例在下方:

<template>
  <div>
    <el-table :data="tableData" ref="elTable" border show-summary style="width: 100%">
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1" width="180">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2" width="180">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1" width="180">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2" width="180">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3">
      </el-table-column> <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2" fixed="right">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3" fixed="left">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
//节流函数
import { throttle } from 'throttle-debounce';
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
      }]
    };
  },
  computed: {
    bodyWrapper() {
      return this.$refs.elTable.$refs.bodyWrapper;
    },
    footerWrapper() {
      return this.$refs.elTable.$refs.footerWrapper;
    },
    fixedWrapper() {
      return this.$refs.elTable.$refs.fixedWrapper
    },
    elTableRefs() {
      return this.$refs.elTable.$refs
    },
  },
  mounted() {
    this.$nextTick(() => {
      // 样式调整,fixed布局下fixed列的高度会有偏差
      let fixedWrapper = this.$refs.elTable.$refs.fixedWrapper ? this.$refs.elTable.$refs.fixedWrapper : ''
      let rightFixedWrapper = this.$refs.elTable.$refs.rightFixedWrapper ? this.$refs.elTable.$refs.rightFixedWrapper : ''
      fixedWrapper && (fixedWrapper.style.maxHeight = this.$refs.elTable.layout.viewportHeight ? this.$refs.elTable.layout.viewportHeight + 'px' : '')
      rightFixedWrapper && (rightFixedWrapper.style.maxHeight = this.$refs.elTable.layout.viewportHeight ? this.$refs.elTable.layout.viewportHeight + 'px' : '')
    })
    // 自定义scroll事件
    this.bindEvents();
    // 去除原本的scroll事件
    this.$refs.elTable.unbindEvents();
  },
  destroyed() {
    // 退出时去除自定义scroll事件
    this.unbindEvents();
  },
  methods: {
    // TODO 使用 CSS transform
    // throttle    节流函数,组件自带的
    syncPostion: throttle(20, function () {
      const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.footerWrapper;
      const { headerWrapper, bodyWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.elTableRefs;
      if (bodyWrapper) bodyWrapper.scrollLeft = scrollLeft;
      if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
      if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
      if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
      const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
      if (scrollLeft >= maxScrollLeftPosition) {
        this.scrollPosition = 'right';
      } else if (scrollLeft === 0) {
        this.scrollPosition = 'left';
      } else {
        this.scrollPosition = 'middle';
      }
    }),
    // 绑定scroll事件
    bindEvents() {
      this.footerWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
    },
    // 解绑scroll事件
    unbindEvents() {
      this.footerWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
    },
  }
};
</script>
<style lang="less">
// 去除原本的进度条
.el-table__body-wrapper {
  overflow-x: hidden !important;
}

// 添加新的的进度条
.el-table__footer-wrapper {
  overflow-x: auto !important;

}
</style>