.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##悬赏#
全部评论

相关推荐

06-27 12:54
已编辑
门头沟学院 Java
累了,讲讲我的大学经历吧,目前在家待业。我是一个二本院校软件工程专业。最开始选专业是觉得计算机感兴趣,所以选择了他。本人学习计算机是从大二暑假结束开始的,也就是大三开始。当时每天学习,我个人认为Java以及是我生活的一部分了,就这样持续学习了一年半,来到了大四上学期末,大概是在12月中旬,我终于找的到了一家上海中厂的实习,但我发现实习生的工作很枯燥,公司分配的活也不多,大多时间也是自己在自学。就这样我秋招末才找到实习。时间来到了3月中旬,公司说我可以转正,但是转正工资只有7000,不过很稳定,不加班,双休,因为要回学校参加答辩了,同时当时也是心高气傲,认为可以找到更好的,所以放弃了转正机会,回学校准备论文。准备论文期间就也没有投递简历。然后时间来到了5月中旬,这时春招基本也结束了,然后我开始投递简历,期间只是约到了几家下场面试。工资也只有6-7k,到现在我不知道该怎么办了。已经没有当初学习的心劲了,好累呀,但是又不知道该干什么去。在家就是打游戏,boss简历投一投。每天日重一次。26秋招都说是针对26届的人,25怎么办。我好绝望。要不要参加考公、考研、央国企这些的。有没有大佬可以帮帮我。为什么感觉别人找工作都是顺其自然的事情,我感觉自己每一步都在艰难追赶。八股文背了又忘背了又忘,我每次都花很长时间去理解他,可是现在感觉八股、项目都忘完了。真的已经没有力气再去学习了。图片是我的简历,有没有大哥可以指正一下,或者说我应该走哪条路,有点不想在找工作了。
码客明:太累了就休息一下兄弟,人生不会完蛋的
如果实习可以转正,你会不...
点赞 评论 收藏
分享
点赞 评论 收藏
分享
评论
1
1
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务