element ui源码解析 -- Pagination篇( 副:列表页进入详情页再返回后,如何保持当前页码正确 )

之所以看Pagination源码,由于一个问题:

需求:从列表页进入详情页后再返回,需求方希望保持在当前的页码而不是重新定位到第一页

问题:按照element ui文档设置current-page后请求的数据正常,但pagination的页码显示却不正确,不管current-page值等于多少,永远显示第一页

解决方案:

1、

  改

    :current-page="currentPage"

  为

    :current-page.sync="currentPage"

2、查询接口增加设置currentPage字段

  

光知道解决方案,不知道原因不行,于是翻了一下源码

原因:

  pagination组件监听了currentPage,pageSize,internalCurrentPage,internalPageCount

  

  引用pagination组件通常这么写:

  

  注意:组件并没有监听total字段,下面会谈到他

  

  这里有个getValidCurrentPage函数,从名字就能看出他是干嘛的,获取合法的当前页码,来看看这个函数都干了啥

  

  这里有个internalPageCount,这个字段就是调用组件时传入的total值(就是上文提到的那个total),由于要请求接口加载数据,一开始我们并不知道会有多少条数据,通常会把这个值设为0,这个值为0该函数就会返回1,组件内部的当前页永远是第一页。pager.vue会按照当前页是第一页进行渲染。此时不管你代码如何修改currentPage都是无效的(本人曾经认为是不是渲染时机导致的页码不正确)。

  以上就是文章开头那个问题的答案。我们可以稍微修改一下参数来印证一下这个答案。

  

  

当前页是第二页,请求的也是第二页

如果你把total改成初始值为0,请求接口再去更改值的变量,页码显示就会异常了。

扩展:

  到这里就结束了吗,没有,知道原因还不行,我们还得知道为什么要这么改,继续。

  为什么要这么写::current-page.sync="currentPage",这里就不费话了,vue官网有说明。

  

  请求接口后为什么要再次设置currentPage?

   还记得上文提到的那个total吗,pagination组件并没有监听total字段,只监听了currentPage,再次设置后会触发

this.$emit(‘update:currentPage‘, newVal);

  实现页码渲染的更新

就酱

原文地址:https://www.cnblogs.com/diantao/p/12149254.html

时间: 2024-08-28 23:51:27

element ui源码解析 -- Pagination篇( 副:列表页进入详情页再返回后,如何保持当前页码正确 )的相关文章

iOS富文本组件的实现—DTCoreText源码解析 数据篇

本文转载 http://blog.cnbang.net/tech/2630/ DTCoreText是个开源的iOS富文本组件,它可以解析HTML与CSS最终用CoreText绘制出来,通常用于在一些需要显示富文本的场景下代替低性能的UIWebView,来看看它是怎样解析和渲染HTML+CSS的,总体上分成两步: 数据解析—把HTML+CSS转换成NSAttributeString 渲染—用CoreText把NSAttributeString内容渲染出来,再加上图片等元素 本篇先介绍第一步,数据解

jQuery2.x源码解析(缓存篇)

缓存是jQuery中的又一核心设计,jQuery自身的很多东西都依赖于缓存,比如事件.一些中间变量.动画等.同时他还为用户提供接口了使用缓存的接口,方便用户在元素节点上保存自己的数据,并且帮助用户解决直接把数据保存到DOM元素是可能引起的内存泄漏.命名冲突等问题. 同时,html5提出了一种通过属性缓存元素数据的功能,就是data-*属性,他可以以字符串的形式保存数据,并且不会和元素固有属性冲突.jQuery的缓存提供了访问data-*的接口,与html5标准结合更加紧密,更加规范. 提问:jQ

iOS富文本组件的实现—DTCoreText源码解析 渲染篇

本文转载至 http://blog.cnbang.net/tech/2729/ 上一篇介绍了DTCoreText怎样把HTML+CSS解析转换成NSAttributeString,本篇接着看看怎样把NSAttributeString渲染出来. CoreText 先简单介绍下CoreText,CoreText是iOS/OSX里的文字渲染引擎,在iOS/OSX上看到的所有文字在底层都是由CoreText去渲染. CoreText会把一行里连在一起相同属性的文字合在一起作为一个CTRun,每一行是一个

Apktool源码解析——第一篇

著名的apktool是android逆向界用的最普遍的一个工具,这个项目的原始地址在这里http://code.google.com/p/android-apktool/,但是你们都懂的在天朝谷歌是无法访问的,所以直接上github的 https://github.com/brutall/brut.apktool. 在brut.apktool路径是主要代码所在,当然还有brut.apktool.smali是反编译smali的目录,目测还有brut.j.common,brut.j.dir,brut

Apktool源码解析——第二篇

上一篇讲到ApkDecoder这个类,大部分调用到还是Androlib类,而且上次发现brutall的代码竟然不是最新的,遂去找iBotP.的代码了. 今天来看Androlib的代码: private final AndrolibResources mAndRes = new AndrolibResources(); protected final ResUnknownFiles mResUnknownFiles = new ResUnknownFiles(); public ApkOption

Pytorch1.3源码解析-第一篇

pytorch$ tree -L 1 . ├── android ├── aten ├── benchmarks ├── binaries ├── c10 ├── caffe2 ├── CITATION ├── cmake ├── CMakeLists.txt ├── CODEOWNERS ├── CONTRIBUTING.md ├── docker ├── docs ├── ios ├── LICENSE ├── Makefile ├── modules ├── mypy-files.txt

DotNetOpenAuth Part 1 : Authorization 验证服务实现及关键源码解析

DotNetOpenAuth 是 .Net 环境下OAuth 开源实现框架.基于此,可以方便的实现 OAuth 验证(Authorization)服务.资源(Resource)服务.针对 DotNetOpenAuth,近期打算整理出三篇随笔: DotNetOpenAuth Part 1 : OAuth2 Authorization 验证服务实现及关键源码解析 DotNetOpenAuth Part 2 : OAuth2 Resource 资源服务实现及关键源码解析 DotNetOpenAuth 

BottomSheets源码解析

原文地址:https://github.com/android-cjj/BottomSheets https://github.com/android-cjj/SourceAnalysis 如果使用上遇到坑,点击链接加入群[GitHub小伙伴交流群''']:http://jq.qq.com/?_wv=1027&k=27lxYHB''' ,群号:477826523 帮你搞定一切bug... Android Support Library 23.2里的 Design Support Library新

ExcelReport第二篇:ExcelReport源码解析

导航 目   录:基于NPOI的报表引擎--ExcelReport 上一篇:使用ExcelReport导出Excel 下一篇:扩展元素格式化器 概述 针对上一篇随笔收到的反馈,在展开对ExcelReport源码解析之前,我认为把编写该组件时的想法分享给大家是有必要的. 编写该组件时,思考如下: 1)要实现样式.格式与数据的彻底分离. 为什么要将样式.格式与数据分离呢?恩,你不妨想一想在生成报表时,那些是变的而那些又是不变的.我的结论是:变的是数据. 有了这个想法,很自然的想到用模板去承载不变的部