大屏展示数据实现table row滚动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- vue -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- element引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- element引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="App">
<template>
<el-table :default-sort="{prop: 'date', order: 'descending'}" :data="rightData" style="width: 100%" height="250">
<el-table-column fixed prop="date" sortable label="日期" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" width="300">
</el-table-column>
<el-table-column prop="zip" label="邮编" width="120">
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
var vm = new Vue({
el: "#App",
data: {
rightData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
},
created() {
//this.getright_table()
},
methods: {
getright_table() {
var isScroll = true
var this_ = this
this.$nextTick(() => {
let div = document.getElementsByClassName("el-table__body-wrapper")[0];
div.style.height = "120px";
let t = document.getElementsByClassName("el-table__body")[0];
setInterval(() => {
if (isScroll) {
var data = this_.rightData[0];
setTimeout(() => {
this_.rightData.push(data);
t.style.transition = "all .5s";
t.style.marginTop = "-41px";
}, 500);
setTimeout(() => {
this_.rightData.splice(0, 1);
t.style.transition = "all 0s ease 0s";
t.style.marginTop = "0";
}, 1000);
}
}, 2500);
});
}
}
})
</script>
</html>