<template>
<div class="main">
<el-table
:data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
"
style="width: 100%"
>
<el-table-column
v-for="item in tableHeader"
:key="item"
:prop="item.key"
:label="item.name"
show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next,jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: "dataList",
data() {
return {
val: "",
tableHeader: [
{
name: "日期",
key: "date"
},
{
name: "姓名",
key: "name"
},
{
name: "地址",
key: "address"
}
],
tableData: [
{
date: "2016-05-04",
name: "王小虎111",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-03",
name: "王小虎15",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎222",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎15",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎333",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎15",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎444",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎15",
address: "上海市普陀区金沙江路 1516 弄"
}
],
pageSize: 2,
currentPage: 1 //当前页面
};
},
methods: {
handleSizeChange: function() {},
handleCurrentChange: function(val) {
// var val = "";]
this.currentPage++;
console.log(this.currentPage)
if(this.currentPage > 4){
this.currentPage=0
// this.currentPage++;
}
// //页面不是第一次进入,当前已经不是第一页,要再加一,进入下一页
// if (val != "") {
// val = val + 1;
// }
// //val为空时,说明页面是第一次进入
// if (val == "") {
// val = val + 1;
// }
//val大于总页数,就让它重新从第一页开始
}
},
mounted() {
setInterval(this.handleCurrentChange, 1000);
}
};
</script>
<style scoped>
.main {
height: 300px;
}
</style>
实现思路:其实很简单的,不要想复杂化了哦。
首先,拿到当前页码,然后循环++ // this.currentPage++。
再判断当页码大于最后的页码(我写的是死值,参数可以自己改)时候,将页码设置为第一页。
最后,给个定时器,每隔多少秒翻页。
就大功告成啦,赶紧动动小手来试试吧~
光看不练,可不行的哦~