.sync vue el-pagination
封装el-pagination使用.sycn,伪代码如下
- 调用方: <pagination :page.sync="pageInfo.page" :limit.sync="pageInfo.size" @pagination="pageChange" >
- 分页组件封装:
<el-pagination :current-page.sync="currentPage"
:page-size.sync="pageSize"
/>
prop接收参数:
page: ,
limit:,
使用计算属性更新:
computed: {
currentPage: {
get() { return this.page
set(val) {this.$emit("update:page",val)
pageSize: {
get() {return this.limit},
set(val) {this.$emit("update:limit",val)
现象:
如果跳转到n页,切换pageSize,使总页数小于n
Console.log(‘this.pageInfo’,this.pageInfo)//最新的值
Console.log(‘this.pageInfo.page’,this.pageInfo.page)//read却是原来的旧的上一步的值
在计算属性currentPage的setget方法,添加log
Console.log(‘this.pageInfo.page’,this.pageInfo.page)的输出顺序总是在分页组件更新emit(udpate:page)方法执行之前
el-paginationd的pageSize变化,会引发page的重新计算,并且是延迟更新的
- 解决方案如下 currentPage: { get() { let pageVal = 1 this.$nextTick(() => { pageVal = this.page
})
return pageVal },
set(val) { this.$emit('update:page', val)}},
空了可讲解下el-pagination源码和.sync机制,可考虑下这里的.sync使用是否妥当
#vue##.sync##el-pagination##悬赏#