<template>
<el-table class="markerDataTable" :data="currentPageData">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-pagination
:hide-on-single-page="value"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:pager-count="7"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total,sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</template>
data() {
return {
data:[{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
value:false,
currentPageData:[],
pageSize: 5,
pageSizes: [5, 10],
currentPage: 1,
total: 0,
}
},
created(){
this.page()
},
methods: {
page(){
this.total = this.data.length;
if(this.total/this.pageSize < 1 || this.total/this.pageSize == 1){
this.value = true
}
this.currentPage = 1;
this.pageSize = 5;
this.setCurrentPageData()
},
setCurrentPageData() {
let begin = (this.currentPage - 1) * this.pageSize
let end = this.currentPage * this.pageSize
this.currentPageData = this.data.slice(
begin,
end
)
},
handleSizeChange(val) {
this.pageSize = val
let begin = (this.currentPage - 1) * val
let end = this.currentPage * val
this.currentPageData = this.data.slice(
begin,
end
)
},
handleCurrentChange(val) {
if (this.currentPage == this.totalPage) return
this.currentPage = val
this.setCurrentPageData()
},
}