基于vue与element来实现前端控制分页
<template>
<div>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
style="width: 100%">
<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>
<div class="pagination">
<el-pagination background
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
</template>
export default{
name: "index",
data() {
return {
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataList:[],
list: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dataListLoading: false,
}
},
mounted() {
this.getDataList()
},
methods:{
getDataList(){
this.totalPage = this.list.length;
this.dataList = this.list.slice((this.pageIndex - 1) * this.pageSize,this.pageIndex * this.pageSize);
},
// 当前页
currentChangeHandle(pageIndex) {
var _this = this;
if (_this.list) {
if (pageIndex) {
_this.pageIndex = pageIndex;
}
_this.dataList = _this.list.slice(
(_this.pageIndex - 1) * _this.pageSize,
_this.pageIndex * _this.pageSize
);
} else {
}
},
}
}