使用element-ui的Pagination 分页的注意事项

最新推荐文章于 2024-05-06 18:46:17 发布
最新推荐文章于 2024-05-06 18:46:17 发布
阅读量2.2k 收藏 1
点赞数 2
分类专栏： 日常踩坑 文章标签： vue.js javascript html5 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CarryNo1/article/details/117363147
版权

当在一个小弹窗中使用分页功能时，因为弹窗宽度较小，分页长度一度超出弹窗需要调整分页长度。

<el-pagination
  :page-size="20"
  :pager-count="11"
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

发现element中自带可以折叠页码按钮的数量，随意给了一个值（是个偶数）后发现报错了，自习翻看文档发现，当前值只能设置奇数会生效。于是修改为奇数，问题就解决了
在这里插入图片描述

月光下的汉堡包
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+Element-ui实现分页效果实例代码详解
01-19
当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。 1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination 快速完成分页功能 最终效果展示 <div class=deit> <div class=crumbs> <el separator=/> <el><i class=el-ico
VUE Element-ui之el-pagination踩过的坑
emmmmmmm__的博客
07-22 4530
由于页面设计得弹窗他宽度不够，还要分成三部分，中间部分是选择人的分页，这就很难办了，把能省的都省了，宽度还是太大，就想着把分页跳转的改少一些，设置可选的跳转为3页，其余省略号显示，我选择了pager-count，如下： <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="leftPage.
Vue Element-Ui 前端控制表格分页
AWDSDF的博客
09-16 552
Vue Element-Ui 前端控制表格分页
element封装自定义弹框组件Table并自适应宽度
qq_53675083的博客
07-07 888
将需要渲染的数据通过数组的传入 组件内通过循环动态渲染，该组件可以通过添加type类型进行无限拓展 放置两个插槽进行拓展一个插槽在表格上面 一个用来插操作按钮 简单描述下传参格式 当有type类型时会进去特殊对应的值进行匹配，如type等于billNo时是可点击跳转将方法会传入外部父组件进行操作，可依次根据需求拓展............
vue+Element-ui实现分页效果
01-21
本文实例为大家分享了vue+Element-ui实现分页效果的具体代码，供大家参考，具体内容如下 当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。 1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination 快速完成分页功能 最终效果展示 <div class=deit> <div class=crumbs> <el-breadcrumb separator=
vue中elementui使用分页插件Pagination分页问题
ycg的博客
08-26 3545
在使用分页插件时好像遇到两个问题 跳转到最后一页之后删除最后一页所有的，会造成分页处于不正常状态 使用了条件查询好像会造成跳转第二页会出点问题 先看插件的各个参数方便理解： ¶ Attributes 参数说明类型可选值默认值small是否使用小型分页样式boolean—falsebackground是否为分页按钮添加背景色boolean—falsepage-size每页显示条目个数，支持 .sync 修饰符number—10total总条目数number——page-count总页数，total 和 pag
elementui 之el-pagination爬坑，属性pager-count的设定
weixin_30834019的博客
08-15 7328
我想设置总页数为10页，页码条总是显示两个页码，其余省略号显示，我选择了pager-count，如下： <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="leftPage...
elementui表格内文字太多设置溢出隐藏,鼠标移入显示并设置宽度大小
web_long的博客
03-24 5058
1.只需要给elementui标签上边添加属性:show-overflow-tooltip="true"即可设置鼠标显示 代码: <el-table-column label="内容" :show-overflow-tooltip="true"> </el-table-column> 2.如果鼠标移入显示内容过多的话可以设置显示的宽度或者设置为隐藏的 <style> .el-tooltip__popper{ displ
element Table表格实现前x行恒展示，不会被折叠，设置点击表头按钮排序。
凉城玖的博客
04-24 510
table表格前X行恒展示不会被折叠。 表头筛选按钮示意图： // data --渲染的数据（每一列每一行），请求回来的. 默认通过字段名和每一个headers对象中每一个prop来对应起来渲染数据的 const header = [{prop:'if_book',name:'第一列'}，{prop:'if_sss',name:'第二列'}，]； // 定义每列列名，需要和接口获取的数据字段名对应起来才能正常展示。 @sort-change // 点击对应表头触发事件，这里可以来实现点击表头筛选/排序数
django-pagination 分页栏长度控制
weixin_30692143的博客
08-05 428
在分页页数很多时，分页样式会很长影响美观我们可以用两个方式控制：1.找到django-pagination里的pagination\pagination.html，在<ul class="pagination">对应的css里修改pagination类的margin，本来是margin:5px 300px 60px;我改为margin:5px 200px 60px;就好很多了。2.在s...
Element-UI 使用手册文档 V2.4.6 （Vue版本）.pdf
11-18
Element-UI 使用手册文档 V2.4.6 （Vue版本） 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 Layout 布局 Container 布局容器 Color 色彩 Typography 字体 Icon 图标 Button 按钮 Form 表单组件 Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框 Form 表单 Data 数据组件 Table 表格 Tag 标签 Progress 进度条 Tree 树形控件 - 2 - 本文档使用 书栈(BookStack.CN) 构建 Pagination 分页 Badge 标记 Notice 通知组件 Alert 警告 Loading 加载 Me
Element-UI踩坑之Pagination组件的使用
10-17
主要介绍了Element-UI踩坑之Pagination组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element table的行高设置和分页的设置的问题的总结
飞翔༒之翼
07-31 2650
1.Q（问题）：elementUI自带的table设置行高 A（解决方法）：修改el-table元素中row-style属性里的height :row-style="{height:'0'}" :cell-style="{padding:'0'}" <el-table :data="tableData" style="width: 100%" :row-style...
el-pagination分页器参数处理
qq_38058121的博客
02-22 536
el-pagination循环时参数传递问题
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 328
注释很详细，直接上代码……
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 600
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue单页面应用和多页面应用的区别
liu62615的博客
05-04 185
概念： SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。 MPA多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。
v-for中的key是什么作用
最新发布
qq_39196447的博客
05-06 169
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢?我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新Inodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 192
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
element-ui前端分页
08-30
Element-ui是一套基于Vue.js的前端UI组件库，它提供了丰富的组件和工具，包括分页组件。Element-ui的分页组件可以帮助开发者实现前端分页效果。 在使用Element-ui的分页组件之前，首先需要引入Element-ui库，并按照文档中的指引进行安装和配置。接下来，我们可以在Vue组件中使用Element-ui的分页组件，通过设置不同的属性来实现不同的分页效果。 Element-ui的分页组件提供了以下几个重要的属性： 1. current-page：当前页码，通过设置该属性可以指定当前所在的页码位置。 2. page-size：每页显示的数据条数，通过设置该属性可以指定每页显示的数据量。 3. total：总数据量，通过设置该属性可以指定总共有多少条数据。 4. layout：分页组件的布局方式，通过设置该属性可以自定义分页组件的显示样式。 举个例子，如果我们想要实现一个每页显示10条数据的分页效果，可以按照以下步骤进行操作： 1. 在Vue组件中引入Element-ui的分页组件。 2. 在data属性中定义currentPage和pageSize两个变量，分别表示当前页码和每页显示的数据量。 3. 在模板中使用<el-pagination>标签，并设置current-page、page-size和total等属性，来实现基本的分页展示。 4. 根据需求，可以通过设置layout属性来自定义分页组件的布局方式。 注意，这只是一个简单的例子，实际的使用可能还需要根据具体的业务需求进行适当的修改和调整。希望以上信息能够帮助到你，如果还有其他问题，请随时提问。<span class="em">1</span> #### 引用[.reference_title] - *1* [vue+Element-ui前端实现分页效果](https://download.csdn.net/download/weixin_38661650/14752574)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值