与上述样式有所不同,如需更改样式请访问Element主页------Pagination 分页
HTML
<table>
<tr v-for="items in projectReportList" :key="items.id">
<td>{{items.type2string}}</td><td>{{items.gentime}}</td>
</tr>
<table>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="opsList.pageNumber"
:page-size="opsList.totalElements / opsList.totalPages"
layout="total, sizes, prev, pager, next, jumper"
:total="opsList.totalElements">
</el-pagination>
</div>
JS
export default {
name: "OpsReportAnalysis",
data () {
return {
opsList: [], //返回的数据
projectReportList: [], //projectReportList
projectId: this.$route.params.projid,
startTime: '', //开始时间
endTime: '', //结束时间
// currentPage: 1, //当前页码
pageNumber: 1, //初始页
type: 0, //报表类型,0为初始值 请选择
pageSize: 5, //每页页数
}
},
created() {
this.getData();//获取数据的方法
// this.handleCurrentChange();
},
methods: {
handleSizeChange: function (size) {
this.pageSize = size;
//console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage){
this.pageNumber = currentPage;
console.log(this.currentPage) //点击第几页
this.$http({
url:this.api.energyoperate.get_opsReportAnalysis, //加传过来的页数获取数据
type: 'get',
dataType: 'json',
params: {
....................//请求的参数
page: this.pageNumber,
pageSize: this.pageSize
}
}).then(res =>{
this.opsList = res.data.data;
this.projectReportList = res.data.data.projectReportList;
console.log('请求成功!')
}).catch(err =>{
console.log('请求失败!')
})
},
getData(){//获取接口数据的方法
....//和上边请求方式一样不再赘述
}
}
}
CSS
....
大概思路,如有不同,稍加改正即可。