element table 轮播表格数据
大屏展示数据实现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>
