el-table表格固定表头与合计行，内容部分自动滚动展示

这里有个需求要在点击文字弹出的弹窗中展示明细数据，要求用表格展示数据，并且不做分页，表头与末尾合计行固定，中间内容部分滑动展示且可以
自动滚动。下边贴代码
html部分，因为我这里有多个不同的表格展示字段，所以弹窗中的表格写成了动态列加载。

<el-table
          border
          ref="tableBox"
          :max-height="tableHeight"
          :data="tableData"
          v-loading="tableLoading"
          element-loading-text="拼命加载中"
          :header-cell-style="{background:'#F2F6FC',color:'#000000'}"
          show-summary
          sum-text="合计行"
          @mouseover.native="mouseover"
          @mouseout.native="mouseout"
          >
          <el-table-column
            v-for="(item, index) in prodectData"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :align="item.align || 'center'"
            :min-width="item.width"
            :type="item.type"
            :show-overflow-tooltip="item.overflow">
            <template slot-scope="scope">
              <div v-text="tableData[scope.$index][item.prop] === null ? '-' : tableData[scope.$index][item.prop]"></div>
            </template>
          </el-table-column>
        </el-table>

至于表头固定，实际上element ui有介绍，只要给el-table设置了高度属性表头就固定了，主要是中间的内容部分我们要怎么去动态计算高度展示

mounted () {
    this.getTableData()
    this.beginShowing()
    // 监听浏览器窗口大小变化
    window.onresize = () => {
      clearInterval(this.myTimer)
      this.beginShowing()
    }
  },
methods: {
getTableData() {},
beginShowing() {
      this.$nextTick(function () {
        // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离
        if(this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {
          this.tableHeight = window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;
          this.$refs.tableBox.doLayout()
          this.roll()
        }
      })
    },
 roll () {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.tableBox
      // 拿到表格中承载数据的div元素
      const bodyWrapper = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)
      this.myTimer = setInterval(() => {
        // 元素自增距离顶部1像素
        bodyWrapper.scrollTop++
        // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)
        if (bodyWrapper.clientHeight + bodyWrapper.scrollTop === bodyWrapper.scrollHeight) {
          // 重置table距离顶部距离
          bodyWrapper.scrollTop = 0
        }
      }, 100)
    },
  // 鼠标进入表格
    mouseover() {
      clearInterval(this.myTimer)
    },
    // 鼠标离开表格
    mouseout() {
      this.roll()
    },
}

我这个表格是写在弹窗中展示的，大家可以自由发挥在页面中也一样，需要注意的是在页面加载时获取表格内容高度的时机，在$nextTick中获取表格实例的数据计算DOM高度，另外在监听浏览器窗口大小变化时要先清除定时器，否则会出现定时器速度越来越快的问题，而且鼠标进入表格和移出表格的事件要加修饰符.native否则可能不起作用。还有我这个表格是封装在el-dialog中。父页面引用这个组件的时候要在组件标签写v-if控制弹窗显隐，否则无法触发弹窗组件内的mounted生命周期。