<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);
},
