在分页组件中加入属性:
<el-pagination
+ :current-page.sync="currentPage"
layout="prev,pager,next"
:page-size="pageParams.pagesize"
:total="total"
@current-change="hcurrentChange"
/>
在data中定义当前页码:currentPage
data(){
return{
currentPage: null
}
}
增加计算属性,分别计算:新增页码、isLastPageFulled(最后一页是否是满页状态)
computed: {
isLastPage() {
const maxNum = Math.ceil(this.total / this.pageParams.pagesize)
return this.pageParams.page === maxNum
},
maxNum() {
return Math.ceil(this.total / this.pageParams.pagesize)
},
isLastPageFulled() {
return this.total % this.pageParams.pagesize === 0
}
},
在添加按钮中绑定事件
<el-button size="small" type="primary" @click="hSubmit">确定</el-button>
在事件的回调函数 (pageParams.page为当前页)
if (this.isLastPageFulled) {
this.pageParams.page = this.maxNum + 1
} else {
this.pageParams.page = this.maxNum
}
this.loadRoles()
在删除按钮中绑定事件并加入:(需要用到点击一行的信息,要用到slot-scope)
<template slot-scope="scope">
<el-button size="small" type="danger" @click="doDel(scope.row.id)">删除</el-button>
</template>
doDel(id) {
....
if (this.rows.length === 1) {
this.pageParams.page--
if (this.pageParams.page <= 0) {
this.pageParams.page = 1
}
}
}