el-pagination 切换页数时，页码消失

最新推荐文章于 2024-06-18 14:47:22 发布
最新推荐文章于 2024-06-18 14:47:22 发布
阅读量2.5k 收藏 1
点赞数 5
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kzj0916/article/details/108617863
版权
在使用el-pagination组件时，遇到切换页码后页码消失的问题。原因是每次切换页码时请求的数据中总数值缺失，导致组件无法正确显示页码。解决办法是在初次加载时仅请求一次总数值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-pagination 切换页数时，页码消失

最近用el-pagination请求数据时发现，请求过来的数据切换页码时，下面的页码不可选，即为空了。。。
调试了一会才明白了问题所在
在这里插入图片描述
在这里插入图片描述

问题所在

问题的关键在于数据，因为我的总数是每次切换页码时都要请求一次，后面才发现除了第一次，后面的值都为undefined，即只有第一次数据中才有总数值，所以我就修改了只获取一次总数。
在这里插入图片描述

总结

请求总数时最好只在刚开始请求一次，后续数据中可能不存在，就会出现问题。

vue+elementUi分页写法el-pagination
CC酱写前端的博客
05-28 630
利用elementUI中el-pagination写页码，从接口中获取total。 <tempalte> <div> <el-pagination :current-page="pageNum" background :page-size="pageSize" layout="prev, pager, next, jumper" :total="total"
前端案例：基于el-table和el-pagination实现数据的分页效果
m0_67401746的博客
03-02 3121
首先使用 el-table(表格) 和 el-pagination(分页) 组件需要npm 下载 Element UI 组件库，下载安装方式参见官网：Element - The world’s most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库[这里是图片001]https://element.eleme.cn/#/zh-CN/component/installation 目录 一、案例效果 二、实现步骤&amp
elementui 分页器，el-pagination 不显示的问题
qq_68155756的博客
03-09 6780
今天敲代码遇到了个很操蛋的问题，分页器不显示，我把分页器封装成共用组件，一个组件显示分页器，另一个组件不显示分页器，我心想这么邪门的吗
element-ui el-pagination分页，新增表格数据后跳转到最后一页，成功跳转但分页器页码未显示到最新页
博客
09-21 771
1. :current-page.sync 中的 sync 标志 2. 给this.pagination.currentPage赋新值 3. ++this.total。这样this.total还是原来的值，但写成++this.total ，this.total会加1。// 在上一行更新好当前页码后，此处再请求后端获取当前页码的数据，即可跳转到最后一页。我这里表格内容跳到最新页了，但是分页器一直显示在倒数第二页。后来发现是this.total未更新，我原来写成。// 向后端发送新增数据请求。
Vue el-pagination组件，当前页码（current-page）已经发生改变，但是组件显示没有发生变化
东东东东东辉
06-16 2145
【代码】Vue el-pagination组件，当前页码（current-page）已经发生改变，但是组件显示没有发生变化。
el-pagenation 组件 删除时候的 页码减一
josiecici的博客
06-11 324
如果删除数量的等于当前页数量的时候 并且当前页大于1 则当前页减1 子组件内的currentpage也减1 if （ arr.length == this.tableData1.length && this.fatherCurrentPage1 > 1）{ this.fatherCurrentPage1 = this.fatherCurrentPage1 - 1 this.$refs.pagenation1.currentPage=this.fatherCurrentPage1
element pagination不显示第二页发问题， pagesize小于10不显示第二页
weixin_46700289的博客
11-10 1211
element pagination 不显示第二页
利用el-pagination实现分页效果（只讨论前端部分）
m0_51933554的博客
10-30 451
利用el-pagination实现分页效果（只讨论前端部分）
el-pagination分页组件导致发送两次请求
最新发布
karshey的博客
06-18 680
当分页组件选择到别的页数（非第一页），再进行查询，查询的内容会显示在第一页，此时会发送两次网络请求。，这里是自动切到1，因为bookTotal<pageSizes。页数的参数变化后，会。网络请求后，返回的数据会改变bookTotal，即分页组件的total参数，网络请求代码：将返回的数据中的数据个数赋值给bookTotal。搜索代码：将分页组件页数选择为1，发送网络请求。可以控制当前分页的页数，写上它就不会触发。，于是又调用了一次接口getList。
el-pagination分页只展示当前页以及前后两页，不展示最后一页，不允许直接点击最后一页，要想到最后一页只能逐个或者五个点击到最后，防止因数据太多造成查询失败问题。
m0_38082957的博客
03-22 1014
不展示分页省略号前后的页码按钮，从前端解决后端由于跨太多页码查询过慢，报错等问题
element-ui中el-pagination分页组件，切换每页显示数量时，有时候数据不显示或获取到的数据为空；只想触发size-change事件不触发current-change事件
qq_45327886的博客
09-23 1万+
element-ui中el-pagination分页组件使用注意事项 切换每页显示数量时，有时候数据不显示或获取到的数据为空 el-pagination组件只想触发size-change事件不触发current-change事件
两个tab页共用一个el-pagination组件 当tab切换时 总页数不足内容显示错误
YanzYan的博客
10-15 1333
问题描述 当两个tab页共用一个el-pagination分页组件时，假如tab1页面共2页，而tab2页面仅一页，从tab1的第二页切换到tab2时，显示无数据，但tab2分页插件显示当前页为1； 解决办法 current-page属性使用.sync 修饰符<el-pagination ... :current-page.sync="pageNo" > </el-pagination> 页面中新增一个tab切换标识let toggleTabFlag = false
elementui 分页el-pagination遇到的所有坑（current失效、分页组件不显示、视图不改变等）
热门推荐
南北极之间
02-16 2万+
el-pagination 分页的坑很多 专门记录一下
elment-ui el-pagination 缩减页码的显示值
vanora1111的博客
04-21 3014
根据产品大大的指挥 来修改样式 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。 ...
关于element-ui的分页器设置每一页显示数量(page-size)后页码并没有变化的问题与解决
zhexian999的博客
10-04 5028
page-size设置的值，是page-sizes数组中有的值,如果page-size的数值是page-sizes的数组里面没有值的,那么就会默认取page-sizes当中的第一个值作为默认值，也就是默认单页面渲染条数。问题：element-ui的分页器在设置后，总页面数异常，不匹配总条数与单页显示数，设置page-size后页面也无变化。为page-sizes手动设定，并且在之后的使用中注意，二者成对使用，以免出现页码不匹配的问题。page-sizes：在不设置的情况下，存在默认值（如下所示）
vue中el-pagination分页属性:total总数不显示问题
a896532147的博客
02-29 2620
1，在elementui组件库中选择适合的分页组件el-pagination，导入到项目中，如何修改:page-size="?",:total="?此时你只需将返回的total类型转换就可以了，vue中String类型转换为int如何装换？的total是integer类型， 如果向后端发送请求，如果后端返回类型如下。说明你返回的total类型为String,这时你的页面显示就为空。2，导入后做如下修改并在data中定义。3，接入后端接口为何不显示呢？这时你的分页器内容就会显示了。
el-pagination 分页不正常？
落花人独立，微雨燕双飞。
12-01 1818
elemet-ui 分页不对
el-pagination 数据分页后在当前页搜索没有数据
m0_57482946的博客
08-05 627
element UI 中分页搜索
Laravel8 分页样式中间页码不显示问题
qq7027的博客
02-25 439
Laravel8 分页样式中间页码不显示问题
el-pagination 每页页数
03-06
el-pagination是Element UI框架中的分页组件，用于在前端页面中展示分页信息和实现分页功能。它可以根据总数据量和每页显示的数据数量来计算出总页数，并提供相应的页码按钮供用户点击切换页面。 关于每页页数的设置，el-pagination提供了一个属性`page-size`来指定每页显示的数据数量。你可以通过设置`page-size`属性的值来控制每页显示的数据条数。默认情况下，`page-size`的值为10，即每页显示10条数据。 如果你想修改每页显示的数据数量，只需将`page-size`属性设置为你想要的值即可。例如，如果你想每页显示20条数据，可以将`page-size`设置为20。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值