VUE项目中element-ui table实现自动滚动效果

VUE项目中element-ui table实现自动滚动效果

HTML 代码：

<template>
	<div id="app">
		<el-table :data="tableData" height="300" border style="width: 70vw" ref="table">
			<el-table-column prop="date" label="日期" width="180"></el-table-column>
			<el-table-column prop="name" label="姓名" width="180"></el-table-column>
			<el-table-column prop="address" label="地址"></el-table-column>
		</el-table>
	</div>
</template>

data定义：

 data() {
  return {
    tableData: [
       {
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }
    ]
  }
},

mounted方法：

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