Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）

需求：使用elementUI的分页组件pagination，要实现从页面跳转到列表页时设置当前页码current-page
问题：设置current-page成功，请求接口携带参数正确，pagination组件上页码显示不正确，始终显示为第一页

解决方式：

1、在请求数据后再设置current-page （推荐）

```javascript
<!-- methods -->
await getList()
// 此时的total应该不为0
this.currentPage = 要设置的页码
```

以下两种方式也可以解决，但原理都是要total的值更新后不为0的情况下才能解决。
2、pagination组件加上key（时间戳），每次都重新渲染
3、pagination组件上设置v-if，设置页码后控制v-if重新渲染（要使用nextTick）

原因：

之所以要在请求数据后才进行设置，是因为在pagination源码中，会对传入的current-page属性进行监听，如果total为0，不管设置的页码是多少，最后都是1。

```javascript<!-- 源码位置 packages/pagination/src/pagination.js -->
watch: {currentPage: {immediate: true,handler(val) {// 这里的internalCurrentPage 是用作pager组件上的渲染，也就是渲染当前页this.internalCurrentPage = this.getValidCurrentPage(val);}}
}
render(h) {...<pager currentPage={ this.internalCurrentPage }
}<!-- 而在getValidCurrentPage这个方法中，会进行一些特殊情况的判断，保证拿到是正确的页码 -->getValidCurrentPage(value) {value = parseInt(value, 10);// internalPageCount 解释一下这个参数可以理解为 total / pagesizeconst havePageCount = typeof this.internalPageCount === 'number';let resetValue;if (!havePageCount) {if (isNaN(value) || value < 1) resetValue = 1;} else {if (value < 1) {resetValue = 1;} else if (value > this.internalPageCount) {resetValue = this.internalPageCount;}}if (resetValue === undefined && isNaN(value)) {resetValue = 1;} else if (resetValue === 0) {resetValue = 1;}return resetValue === undefined ? value : resetValue;
},```

所以，当total为0的情况下，设置current-page是不会生效的，始终为1。

Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）相关推荐

UCML-领先的B/S应用快速开发工具，基于组件重用和应用框架重用，支持.NET体系，直接生成C#源码；
UCML-领先的B/S应用快速开发工具,基于组件重用和应用框架重用,支持.NET体系,直接生成C#源码:UCML涵盖了一个WEB应用系统业务开发的全过程,包括数据访问层(O/R映射)定义.业务框架开发 ...
vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
php修改文件访问目录为 .htaccess_借github上韩国师傅的一个源码实例再次理解.htaccess的功效...
今天翻了翻GitHub,很巧发现一个韩国师傅的实例:也是关于.htaccess的,就继续理解了一波:稍微修改了几行代码来理解一下:先来发出源码: 我们简单的审计:很明显,列出了禁止的后缀:但是很明显, ...
Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
EasyUI基础入门之Pagination(分页)
前言对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
element 往node里面增加属性值_【Vue原理】Compile - 源码版之 Parse 属性解析
写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 [2.5.17] 如果你觉得排版难 ...
Django Rest Framework源码剖析(七)-----分页
一.简介分页对于大多数网站来说是必不可少的,那你使用restful架构时候,你可以从后台获取数据,在前端利用利用框架或自定义分页,这是一种解决方案.当然django rest framework提供 ...
基于elementui源码实现自定义穿梭框transfer组件
需求:更改elementui中el-transfer样式, 实现单击左侧选项即加入右边选框,单击右侧选项即可回到左侧选框,中间左右来回按钮更改为左侧全选右侧全选,最终修改后效果图如下下图源码可通过g ...

Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）

解决方式：

1、在请求数据后再设置current-page （推荐）

原因：

之所以要在请求数据后才进行设置，是因为在pagination源码中，会对传入的current-page属性进行监听，如果total为0，不管设置的页码是多少，最后都是1。

所以，当total为0的情况下，设置current-page是不会生效的，始终为1。

Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）相关推荐

最新文章

热门文章