element -ui的el-pagination组件踩坑，:total属性赋值页面展示不出来的问题

最新推荐文章于 2024-05-27 15:03:45 发布
最新推荐文章于 2024-05-27 15:03:45 发布
阅读量3.3w 收藏 9
点赞数 13
分类专栏： VUE 文章标签： VUE的Element组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a519637560/article/details/84400620
版权

element -ui的el-pagination组件踩坑，:total属性赋值页面展示不出来的问题。

在使用element -ui的el-pagination组件的过程中，遇见了:total属性赋值页面展示不出来的问题。
如图：在这里插入图片描述

组件代码：在这里插入图片描述

由于我是给他赋值的是变量所以一直没有刷新出来。
在这里插入图片描述
解决办法：在这里插入图片描述
由于element -ui 这个组件需要的传入的是一个整数，所以在传入变量的时候需要注意一下。可以用parseInt方法把字符串转换成数字
把变量进行转换后效果就出来了:
在这里插入图片描述

年轻人_gyc
关注
  • 13
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
11-29
Vue2.5 结合 Element UI 实现分页功能主要涉及两个关键组件：Table 和 Pagination。在前端开发中，这样的组合非常常见，用于展示大量数据时的分页展示，提高用户体验。 1. **Element UI 引入**： 在 Vue 应用中...
利用vue和element-ui设置表格内容分页的实例
08-27
Element UI 提供了一个名为 `el-pagination` 的组件，可以用来实现表格内容分页。下面是一个基本的使用示例： ```html <el-pagination small layout="prev, pager, next" :total="total" @current-change=...
ElementPlus中total出现el.pagination.total，显示总数没有出现怎样解决,出现的是英文，不是中文如何解决，这里如何配置中文，配置中文
weixin_54048131的博客
05-03 408
【代码】ElementPlus中total出现el.pagination.total，显示总数没有出现怎样解决,出现的是英文，不是中文如何解决，这里如何配置中文，配置中文。
element ui pagination 关于属性 total的值
sjzlovezhz的博客
01-06 1740
我习惯性绑定在在data()中，属性参数如下 pagiOption: { current: 1, size: 10, pagerCount: 5, layout: "total, prev, pager, next, jumper", total: 5, //随便一个数，页面初始化时会被请求过来的数据覆盖掉 }, 此时在刷新载入页面获取数据时不会有任何问题，如图1 图1 但是如果我的属性配置是这样的
Vue2 Element-UI 分页组件el-pagination 修改 自带的total、跳转等默认文字
最新发布
qq_44776454的博客
05-27 903
Vue2 Element-UI 分页组件el-pagination 修改 自带的total、跳转等默认文字
element 中＜el-pagination＞＜/el-pagination＞的用法详解
wangming2531的博客
09-13 7848
el-pagination 其实他就是做分页用的 1.total是总条数也就是说一共有多少条数据，如下所示： 2.page-count是总页数也就是你这些数据一共有多少页 3.current-page 当前页数 4.page-size 每页显示多少条数据 5.layout 布局 参考一下布局自行放置 展示： ...
elementui中的el-pagination分页器使用
小伙伴们全都Lucky！
08-27 1107
一、html部分 total是总页数 ；xinwzix.pageSize是一页显示几条；xinwzix.pageNum是显示第几页； <el-pagination :total="total" :current-page="xinwzix.pageNum" :page-size="xinwzix.pageSize" :page-sizes="[5]" :pager-count="5" @current-change="handleCurrentChange" @siz...
vue中el-pagination分页属性:total总数不显示问题
a896532147的博客
02-29 1475
1，在elementui组件库中选择适合的分页组件el-pagination，导入到项目中，如何修改:page-size="?",:total="?此时你只需将返回的total类型转换就可以了，vue中String类型转换为int如何装换？的total是integer类型， 如果向后端发送请求，如果后端返回类型如下。说明你返回的total类型为String,这时你的页面显示就为空。2，导入后做如下修改并在data中定义。3，接入后端接口为何不显示呢？这时你的分页器内容就会显示了。
vue3+element plus，使用分页total修改成中文
x_XDGS的博客
06-07 3567
使用element plus的的时候，total属性显示是英文这是我建的一个新项目，总数显示的Total 1000我们的需求是显示中文，共 1000 条这个就很尴尬，组件封装的东西，查了所有api都没有写怎么改官网上面有个（官网直通车）其实按照官网上写的配置，其实并不好使。那我们应该怎么办呢？一般的是不是都会去看看控制台里面有啥？细心的人会发现，这个好像就是我们引入的组件吧将这个展开，有个el对象，el对象里面会有pagination，里面的goto，total好像在哪里见过。
Element-UI踩坑之Pagination组件的使用
12-10
一般Pagination组件的声明如下： <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :current-page="currentPage" :total="total" :page-...
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
基于tp5的vue+element-ui 实现分页
04-10
`Element UI`提供了`<el-pagination>`组件，用于实现分页功能。我们可以设置其属性，如`total`（总条目数）、`page-size`（每页显示条目数）、`current-page`（当前页码）等，以实现分页的交互效果。同时，该组件还...
elementui 分页el-pagination遇到的所有坑（current失效、分页组件不显示、视图不改变等）
热门推荐
南北极之间
02-16 2万+
el-pagination 分页的坑很多 专门记录一下
Pagination 分页如何使用
TianXuab的博客
07-14 466
其中，fetchData 方法为自定义的获取数据的方法，currentPage 和 pageSize 是 el-pagination 组件传入的参数。以上是一个简单的 el-pagination 分页示例，你可以根据实际需要自行调整相应的参数和处理方式。el-pagination 是 Element UI 的一个分页组件，可以用于 Vue.js 项目中。
elementui 分页器，el-pagination 不显示的问题
qq_68155756的博客
03-09 5275
今天敲代码遇到了个很操蛋的问题，分页器不显示，我把分页器封装成共用组件，一个组件显示分页器，另一个组件不显示分页器，我心想这么邪门的吗
vue elementUI el-pagination 分页器的使用细节
qq_41974250的博客
03-23 6795
vue elementUI el-pagination 分页器的使用细节
element分页 el-pagination及自定义total文字内容
m0_70265923的博客
12-27 1162
element分页 el-pagination及自定义total文字内容
elementUI Pagination 分页页面刷新后总页码变为0
xiaoxiannv666的博客
01-29 1162
今天使用了element-ui组件库中的pagination分页功能，非常方便，但是这个功能有个小坑： 页面加载完成后刷新页面，总页码(total)变为0，再通过pagination组件改变页码，重新发起请求更新total的值，也不能在页面响应式变化，页面上的 总页码（total）始终为0 解决：给pagination 增加一个v-if控制是否生成分页，最开始设置为false，每次获得total的值后重置v-if的值为true ...
elementui分页器不显示total总数
weixin_48193493的博客
08-20 681
分页器的total是integer型才会生效， 如果向后端发送请求，返回的数据 total是string型，那么就会出现这个问题。第一次做项目，遇到了好多次这个报错，但是每次都记不住...就记录一下吧。处理一下total的格式就好了。
element-ui pagination标签里面的@pagination方法有什么用
05-10
`@pagination` 是 Element UI Pagination 组件中的一个事件，用于监听页码改变的事件。当用户点击分页器上的页码按钮时，该事件会触发，从而触发绑定在该事件上的函数。 例如，你可以在模板中绑定一个函数到 `@pagination` 上，当用户点击分页器上的页码按钮时，该函数会被调用，并且会传递一个参数，即当前页码。 ```html <el-pagination @pagination="handlePagination" :page-size="10" :total="100" layout="prev, pager, next" ></el-pagination> ``` ```js methods: { handlePagination(page) { console.log(`当前页码为：${page}`); } } ``` 上面的代码中，当用户点击分页器上的页码按钮时，`handlePagination` 函数会被调用，并且会输出当前页码。因此，`@pagination` 事件可以帮助你监听分页器的页码改变事件，以便你在用户翻页时执行相应的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值