js实现table自动滚动

 

<div style="height:400px" :class="{anim:animate==true}" @mouseenter="mouseenter" @mouseleave="mouseleave">

<el-table :data="tableData" border style="width: 100%;margin-top: 15px;height:389px" :default-sort="{prop: 'date', order: 'descending'}">

<el-table-column prop="standard_name_cn" label="数据标准名称"></el-table-column>

<el-table-column prop="standard_name_cn" label="标准类型">

<template slot-scope="scope">

<span v-if="scope.row.standard_type==='0'">值域标准</span>

<span v-if="scope.row.standard_type==='1'">标准文件</span>

</template>

</el-table-column>

<el-table-column prop="dsTypeName" label="操作" width="120px">

<template slot-scope="scope">

<span class="activeClass" v-if="scope.row.operation_type==='A'">新增</span>

<span class="warningClass" v-if="scope.row.operation_type==='E'">编辑</span>

<span class="errorClass" v-if="scope.row.operation_type==='D'">删除</span>

<span class="activeClass" v-if="scope.row.operation_type==='P'">审核通过</span>

<span class="activeClass" v-if="scope.row.operation_type==='B'">正在审核</span>

<span class="errorClass" v-if="scope.row.operation_type==='F'">审核不通过</span>

<span class="activeClass" v-if="scope.row.operation_type==='R'">发布</span>

<span class="errorClass" v-if="scope.row.operation_type==='L'">失效</span>

</template>

</el-table-column>

<el-table-column prop="operation_user_name" label="操作人"></el-table-column>

<el-table-column prop="operation_time" label="操作时间" sortable width="160px"></el-table-column>

</el-table>

</div>

 

js

methods: {

mouseenter(){

var self = this

clearInterval(self.interval)

self.interval = null

},

mouseleave(){

var self = this

this.interval = setInterval(self.scroll, 1000);

},

//table滚动

scroll() {

this.animate = !this.animate;

var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向

setTimeout(function() {

that.tableData.push(that.tableData[0]);

that.tableData.shift();

that.animate = !that.animate;

setTimeout(function() {}, 5000); // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了

}, 2000);

},

}

 

 

data() {

return {

animate: true,

interval: null

};

},

created() {

this.interval = setInterval(this.scroll, 1000);

},