//1.如果给current-page,page-size,total绑定了.sync可以直接调用获取接口
<el-pagination
background
:current-page.sync="params.page"
//total,全部显示可以把总条数放到数组中
:page-sizes="[3, 5, 10,total]"
:page-size.sync="params.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="GetSysUser()"
@current-change="GetSysUser()"
@prev-click="GetSysUser()"
@next-click="GetSysUser()"
/>
<script>
export default {
data() {
return {
params: {
page: 1,
size: 3
},
total: 0
}
},
created() {
//获取数据
this.GetSysUser()
},
methods: {
//调用接口获取渲染数据
async GetSysUser() {
const { data: res } = await GetSysUserAPI(this.params)
this.list = res.rows
this.total = res.total
},
}
}
</script>
//2.点击事件
<el-pagination
background
:current-page="params.page"
:page-sizes="[3, 5, 10,total]"
:page-size="params.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="paramsChange($event,0)"
@current-change="paramsChange($event,1)"
@prev-click="paramsChange($event,2)"
@next-click="paramsChange($event,3)"
/>
<script>
export default {
data() {
return {
params: {
page: 1,
size: 3
},
total: 0
}
},
created() {
//获取数据
this.GetSysUser()
},
methods: {
//调用接口获取渲染数据
async GetSysUser() {
const { data: res } = await GetSysUserAPI(this.params)
this.list = res.rows
this.total = res.total
},
paramsChange(e,val){
//e是你点击的页码/每页显示的数据,val是你点击的是哪个,你也可以设四个事件,我这边用一个事件来举例
if(val===0){
this.params.size=e
}else {
this.params.page=e
}
this.GetSysUser()
}
}
}
</script>
//显示最新数据
watch: {
//监听总条数的变化
total(newval, oldval) {
//如果你的数据是添加/删除到最后你可以通过这段代码找到你添加的数据的位置
//如果新值大于旧值就是添加,反之则是删除,
//旧值不等于0是因为在刚开始获取的时候data中total: 0,可以排除获取数据
//总条数模当前每页条数没有剩余就是跳转到最后一页,有剩余就跳转到最后一页+1
//删除的时候总条数模当前每页条数没有剩余就跳转到最后一页-1
总条数模当前每页条数有剩余就是跳转到最后一页就不动
//给分页组件加一个ref=“”,internalPageCount就是总页数
//this.$refs.pagination.internalPageCount就可以获取总页数
//最后再从新渲染数据
//简化版
newval > oldval && oldval !== 0 ? (newval % this.params.pagesize !== 0 ? this.params.page = this.$refs.pagination.internalPageCount + 1 : this.params.page = this.$refs.pagination.internalPageCount) : (newval % this.params.pagesize === 0 ? this.params.page = this.$refs.pagination.internalPageCount - 1 : this.params.page = this.$refs.pagination.internalPageCount)
this.GetSysRole()
//简化之前
// if (newval > oldval && oldval !== 0) {
// newval % this.params.pagesize !== 0 ? this.params.page = this.$refs.pagination.internalPageCount + 1 : this.params.page = this.$refs.pagination.internalPageCount
// this.GetSysRole()
// } else if (newval < oldval && oldval !== 0) {
// newval % this.params.pagesize === 0 ? this.params.page = this.$refs.pagination.internalPageCount - 1 : this.params.page = this.$refs.pagination.internalPageCount
// this.GetSysRole()
// }
}
}