vue el-table的列表滚动，单张表的表头固定内容滚动

vue el-table的列表滚动，单张表的表头固定内容滚动

使用场景：当需要表格内容循环滚动显示时。
做了优化的点： 1.单张表实现滚动。2.滚动的高度随着窗口高度自适应。3.鼠标悬浮表格内停止滚动。
代码：
首先需要将表格用ref绑定一个值名通过this.$refs.值名来获取,定义个tableHeight获取高度。

<el-table :data="islist" ref="table" :max-height="tableHeight" @cell-mouse-enter="mouseover" @cell-mouse-leave="mouseout">
	</el-table>

data(){
	return {
		tableHeight: 50,
		myTimer: null,
		}
	}
	
mounted () {
	this.$nextTick(function () {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
        //50为预留el-table到浏览器底部的高度
      })
    this.roll()
  },

roll () {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const bodyWrapper = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.timer = setInterval(() => {
        // 元素自增距离顶部1像素
        bodyWrapper.scrollTop++
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (bodyWrapper.clientHeight + bodyWrapper.scrollTop == bodyWrapper.scrollHeight) {
          // 重置table距离顶部距离
          bodyWrapper.scrollTop = 0
        }
      }, 120)
    },
mouseover() {
        clearInterval(this.myTimer)
      },

mouseout() {
        this.roll()
      },