element中pagination组件关于数据在分页显示时遇到的问题

最新推荐文章于 2023-03-09 16:45:13 发布
最新推荐文章于 2023-03-09 16:45:13 发布
阅读量3.9k 收藏 3
点赞数
分类专栏： vue学习 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46360310/article/details/106760227
版权
问题描述在做练习时其中有一个页面需要用到element中的pagination组件进行分页显示，但是按照文档配置后结果始终不能分页显示数据原因相关接口里没有关于page-size和current-page的请求参数解决办法利用slice对数据进行分割组件<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryInfo.
摘要由CSDN通过智能技术生成
问题描述

在做练习时其中有一个页面需要用到element中的pagination组件进行分页显示，但是按照文档配置后结果始终不能分页显示数据

原因

相关接口里没有关于page-size和current-page的请求参数

解决办法

利用slice对数据进行分割
组件

<el-pagination
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange"
 :current-page.sync="queryInfo.pagenum" 
 :page-size="queryInfo.pagesize" 
 :page-sizes="[7, 15, 25,35]"
layout="tota
最低0.47元/天 解锁文章
学习前端ing
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-Pagination分页问题
lzxy1213的博客
05-09 1363
element-Pagination在点击换页或者点击搜索按钮应该回到第一页的时候，页面未被激活，即页码未改变。 百度搜索，尝试了很多种方案，比如 加上current-page.sync修饰、结合localStorage利用created()beforeUpdate ()beforeDestroy ()方法，重置current-page属性值..不知道是我没写对还是其他原因，最后都没成功...
el-pagination解决分页不更新的原因及解决方法
qq_40685439的博客
06-29 6050
场景：在分页查询的时候，有时候我们在切换查询条件时，分页的页数还停留在上一次查看的页数，而不是从第一页开始。 下图是重新查询的数据，但是页码还停留在第六页（当数据多于六页数据的时候，会显示第六页的数据，但是当数据少于六页数据时，就会显示暂时无数据，其实数据是拿回来的，只是这时候分页器接收到的页码是6，而没有那么多数据显示，就会显示暂无数据） **解决办法：**可以给装分页器的元素添加一个条件渲染，让每次请求时，分页器都重新加载。在请求开始前，把pageshow设为false，请求结束之后，就设为true（
element plus 或者:current-page或者el-pagination无法分页，始终在第一页
weixin_45917610的博客
10-27 3522
我用的是vue3+element plus，当然原理也差不多 原因是：:current-page不是很支持双向数据绑定 所以是应该这样的：在 把 :current-page变成 v-model:current-page就可以了 要写好分页可以参考这个更加详细（受此启发）：评论区有大神。 1、链接: https://blog.csdn.net/qq_33692349/article/details/91490480?ops_request_misc=%257B%2522request%255Fid%252
elementui 分页el-pagination遇到的所有坑（current失效、分页组件不显示、视图不改变等）
热门推荐
南北极之间
02-16 2万+
el-pagination 分页的坑很多 专门记录一下
elementui 分页器，el-pagination 不显示的问题
qq_68155756的博客
03-09 5241
今天敲代码遇到了个很操蛋的问题，分页器不显示，我把分页器封装成共用组件，一个组件显示分页器，另一个组件不显示分页器，我心想这么邪门的吗
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
08-28
主要介绍了Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
Element-UI踩坑之Pagination组件的使用
10-17
主要介绍了Element-UI踩坑之Pagination组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于vue+element的分页组件
03-03
在现代Web应用开发中，数据分页是一种常见的优化用户体验的方式，尤其当处理大量数据时。Vue.js是一个轻量级但功能强大的JavaScript框架，它提供了一种高效的方式来构建可复用和可维护的用户界面。Element UI是针对...
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
最新发布
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
针对el-pagination分页异常解决
weixin_43864172的博客
01-13 1434
针对el-pagination分页异常解决。
element-ui中el-pagination分页组件，切换每页显示数量时，有时候数据不显示或获取到的数据为空；只想触发size-change事件不触发current-change事件
qq_45327886的博客
09-23 1万+
element-ui中el-pagination分页组件使用注意事项 切换每页显示数量时，有时候数据不显示或获取到的数据为空 el-pagination组件只想触发size-change事件不触发current-change事件
el-pagination分页-前端无分页查询字段，自定义生成查询功能
Principal_Z的博客
07-31 374
需求 后台无分页查询字段 使用el-pagination控制显示 要求 后台必须把数据全部返回到一个数组中 上代码 // html 部分 <el-table :data="tableData"> <el-table-column label="ID" prop="id" width="50"> </el-table-column> </el-table> <el-pagination @size-change="handl
element组件，el-pagination分页的问题，以及使用教程
星空的日常博客，希望日常能给你帮助
02-27 2685
element组件，el-pagination分页的问题，以及使用教程
vue elementUI el-pagination 分页器的使用细节
qq_41974250的博客
03-23 6789
vue elementUI el-pagination 分页器的使用细节
Vue 3下element ui分页功能异常的解决
NJR10byh的博客
08-01 1714
Pagination 分页 先不卖关子，直接上解决方案： 1、换页获取数据是异步操作，所以用async…await… 2、不要被官方的要监听误导！！！ 下面描述一下我遇到的问题: 这是element ui最基础的分页组件，current-page这个参数就是当前页数，支持 v-model 双向绑定。代码如下： <el-pagination class="pages" v-model:currentPage="currentPage" :page-size="10" layout="total,
Vue2 Element Pagination组件 每页数据量不同的解决方案
白瑕 的博客
09-07 1646
Element pagination, 每页展示不同数据量的解决方案, 单页数据不足会空出空间.
EasyUI Pagination分页功能的实现讲解以分页没有效果问题
空空说技术的博客
10-22 7183
EasyUI Pagination 分页没有效果？分页功能的实现讲解 本次某个项目中用到Easyui+SSM框架，而easyui-Pagination在前后台分页的写法比较多，但是相对固定，于是我在这里直接写一份关于easyui下的分页教程，省得以后到处找，也方便各位参考。 当然本文是基于SSM+Easyui而且是有一定基础的朋友。 1.分页介绍 web开发中所说的分页，实际上是分为假分页和真分页...
el-pagination分页组件的页容量下拉框定位错误问题
smouns_的博客
12-13 2141
下拉框定位错误
element中分页器如何显示数据
06-10
在 Element UI 中，Pagination 分页组件只负责分页的显示和分页导航栏的生成。要将数据显示在分页器上，需要手动实现相应的逻辑。 下面是一个简单的例子，演示如何将数据显示在 Pagination 分页器上： ``` <template> <div> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr v-for="(item, index) in listData" :key="index"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" /> </div> </template> <script> export default { data() { return { listData: [], // 列表数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页数据量 total: 0, // 数据总数 }; }, methods: { // 处理分页器页码变化事件 handlePageChange(currentPage) { this.currentPage = currentPage; this.fetchData(); }, // 从服务器获取数据 fetchData() { // 发送请求，获取当前页码对应的数据 // ... // 模拟服务器返回的数据 const data = [ { id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 22 }, // ... ]; this.listData = data.slice( (this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize ); this.total = data.length; }, }, created() { this.fetchData(); }, }; </script> ``` 在上面的代码中，我们通过 `v-for` 指令将列表数据 `listData` 显示在表格中，同时在页面底部添加了 Pagination 分页组件。在 `handlePageChange` 方法中，我们监听了分页器的页码变化事件，并根据当前页码获取相应的数据。在 `fetchData` 方法中，我们模拟了从服务器获取数据的过程，并将当前页码对应的数据保存在 `listData` 中，并将数据总数保存在 `total` 中。通过这样的方式，就可以将数据显示在 Pagination 分页器上了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值