el-pagination 组件使用注意点（坑）

最新推荐文章于 2024-09-11 18:28:44 发布

原创最新推荐文章于 2024-09-11 18:28:44 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

在Vue.js项目中，遇到一个分页查询的问题。当查询条件不变时，由于将分页参数page始终设为1，导致分页组件显示页码与实际请求的页码不一致。为解决这个问题，采取了重置total为0的方法，使el-pagination组件重新计算，从而保持页面与数据的一致性。

pc项目中需要使用查询业务，并且有分页功能，于是，我使用了el-tabel 和 el-pagination，

效果如下：

点击查询时候，因为不确定查询数据会有多少条，故将查询时候传的分页改为page=1 ，这个对于两次显示的前后数据不一致，到此就可以了。但是当两次前后数据一致，那就会有问题。

具体问题：分页组件的显示的page和实际请求的page（page=1）不一致。

我的思路是：将用于渲染的total重置为0，这样el-pagination组件就会重新渲染计算

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zimu_spm

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue开发使用element的el-pagination分页组件

weixin_48596030的博客

05-24

729

实现思路：获取到列表的所有数据，然后对数据进行处理，紧接着操作分页。//切换每页条数容量。

UI组件---如何设置el-pagination分页组件的背景色

COCOLI_BK的博客

11-07

1316

具体的CSS规则取决于您想要更改的是哪个部分的背景色，例如普通页码、活跃页码、上下导航箭头等。以下是一些示例CSS规则，您可以根据自己的需求进行调整：/* 修改普通页码的背景色 */background-color: #您想要的颜色;/* 修改活跃页码的背景色 */background-color: #您想要的颜色;/* 修改上下导航箭头的背景色 */background-color: #您想要的颜色;请确保将#您想要的颜色替换为您希望设置的具体颜色代码。

1 条评论您还未登录，请先登录后发表或查看评论

VUE Element-ui之el-pagination踩过的坑

emmmmmmm__的博客

07-22

4872

由于页面设计得弹窗他宽度不够，还要分成三部分，中间部分是选择人的分页，这就很难办了，把能省的都省了，宽度还是太大，就想着把分页跳转的改少一些，设置可选的跳转为3页，其余省略号显示，我选择了pager-count，如下： <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="leftPage.

vue-element-ui中记一下el-table中pagination翻页遇到的一个问题

zhekua0305的博客

12-03

1450

记录一下这个问题,懂的大佬可以留言解释下其原理

elementui 分页el-pagination遇到的所有坑（current失效、分页组件不显示、视图不改变等）

热门推荐

南北极之间

02-16

2万+

el-pagination 分页的坑很多专门记录一下

element 分页切换时:current-page无效页数不会跟着一起切换

红烧咸咸鱼

04-26

1364

element 分页切换时:current-page无效页数不会跟着一起切换

针对el-pagination分页异常解决

weixin_43864172的博客

01-13

1780

针对el-pagination分页异常解决。

精选资源

【Vue2 + ElementUI】分页el-pagination 封装成公用组件

01-25

总结来说，封装`el-pagination`为公用组件涉及的主要步骤有：创建新组件，引入并配置el-pagination，定义并接收props，处理事件，以及设置和使用语言包。通过这种方式，我们可以实现分页组件的复用，同时支持多语言...

element-plus分页组件el-pagination的使用

lucky_ly的博客

08-12

1317

分页组件是非常常用的组件之一和表格组件一般成对出现，element-plus 分页组件的组件名是el-pagination。

基于Vue3的el分页器（el-pagination）的组件封装

qq_62685154的博客

09-11

2398

以上就是所以代码，这里直接复制粘贴即可t=O83A。

element-ui 切换分页条数，会出现两次请求

weixin_42504113的博客

05-25

4869

字段：pageSize代表每页条数（初始为10），page代表页数（初始为1），total代表总数分页组件每页显示条数[10,20] 下面代码分别时页面改变和每页条数改变时调用的函数 // 页码改变时调用 handleCurrentChange (val) { // 修改页码 this.page= val // 获取表格数据 this.getTableData() }, // 每页条数改变时调用 handleSizeChange (pageSize) { // 修改每

elementui分页选择器el-pagination的bug，可使用current-page.sync解决

TanMengyi的博客

07-24

7579

参考文章：https://blog.csdn.net/zxwbkzh/article/details/78965309 在某个列表页，我点到第四页，然后选择其中某条数据进行编辑，打开编辑弹窗，编辑点确定后期望：列表刷新，展示第一页数据，最下面也展示在第一页实际效果：数据是刷新到了第一页的数据，但是最下面展示仍然在第四页，如下图：最开始我想的是直接修改el-pagination的curre...

解决el-pagination无法点击的问题

aa754403560的博客

07-04

2721

在使用elementUi的分页器组件的时候，遇到不能点击页码的问题。但是我发现点击页码右上角的位置是可以用的。所以我给el-pagination加上一个margin就可以了。

elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题

qq_34587684的博客

07-11

1474

elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题第一个弹出是正常的，里面是el-upload点击缩略图查看大图，点击查看大图发现弹出的大图弹出层被遮罩层遮住了，查看CSS发现是z-index问题解决办法，在el-upload里面的el-dialog增加 append-to-body完美解决...

解决el-form动态表单切换导致的校验bug

努力努力再努力的博客

09-07

1523

问题描述：在平常项目需求中，常常有el-form表单需要根据条件切换el-form-item的情况发生，这时候容易切换过多导致校验错误定义。解决方式: 在v-if做判断的时候，加上key。类似于这种情况，切换之后校验还在。

element组件遇到的问题及解决方案

L_C_sunny的博客

06-17

553

1.Vue中input被赋值后，无法再修改编辑的问题解决第一种方案：属性名并未声明,因此Vue就无法对属性执行 getter/setter 转化过程，导致xx属性不是响应式的，因此无法触发视图更新。解决的方式有两种，第一种就是显示的声明formInline这个对象的属性第二种方案：使用Vue的全局API: $set()赋值 this.$set(this.xxx, 'xxx', xxx) 2.多个el-form表单，表单验证的功能无效多个el-form表单，:model="ruleForm" r

elementUI在IE中的常见问题集合（持续更新）

CuiCui_web的博客

01-02

1272

1、IE上弹窗关闭时，会闪烁问题（在全局加上下面样式） // 防止在IE上弹窗关闭时抖动 .el-dialog__wrapper{ &.dialog-fade-leave-active{ -ms-animation:none !important; } } 2、IE上打开弹窗，弹窗被遮罩层遮罩在el-dialog标签上加上:append-to-body=...

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

伟深么的博客

05-18

4528

需求：使用elementUI的分页组件pagination，要实现从页面跳转到列表页时设置当前页码current-page 问题：设置current-page成功，请求接口携带参数正确，pagination组件上页码显示不正确，始终显示为第一页解决方式： 1、在请求数据后再设置current-page （推荐） ```javascript  await getList() // 此时的total应该不为0 this.currentPage = 要设置的页码 `

Vue+ElementUI中 el-dialog弹框蒙层问题

xiaoxiaofly的博客

02-10

1791

开发项目时页面中用到了2个弹框（或者是dialog中再嵌套dialog），会出现2个灰色蒙版层叠加，需要再点一下蒙层才会消失。用一个属性解决 :append-to-body="true"

el-pagination组件插槽

最新发布

02-12

### 关于 `el-pagination` 组件的插槽使用 #### 插槽概述 `el-pagination` 提供了多种类型的插槽来增强其灵活性，允许开发者自定义分页器中的特定部分。通过这些插槽，可以更精细地控制页面布局以及添加额外的功能。 #### 常见插槽及其应用实例 ##### 默认插槽 (default slot) 默认情况下可以直接放置一些补充性的 HTML 或者其他组件到分页控件内部，通常用来增加说明文字或者其他交互元素： ```html <template> <div class="pagination-container"> <el-pagination layout="prev, pager, next" :total="100">  <span style="margin-left: 20px;">共 {{ total }} 条记录</span> </el-pagination> </div> </template> <script> export default { data() { return { total: 100 }; } }; </script> ``` ##### prev 和 next 文本定制如果希望改变前后翻页按钮上的文本，则可以通过相应位置的具名插槽来进行修改: ```html <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="totalCount"> <span slot="prev">上一页</span>  <span slot="next">下一页</span>  </el-pagination> </template> ``` 此处展示了如何利用具名插槽 `slot="prev"` 和 `slot="next"` 更改导航链接的内容[^2]。 ##### size-changer 定制每页条目数选择框当配置有 `sizes` 属性时，还可以进一步美化或调整该区域的表现形式： ```html <template> <el-pagination background layout="sizes, prev, pager, next" :total="1000"> <template v-slot:sizes="{ pages }"> <select v-model="value" @change="handleChange($event)"> <option v-for="(item,index) in pages" :key="index">{{ item }}</option> </select> </template> </el-pagination> </template> <script> export default { methods:{ handleChange(event){ console.log('Selected:', event.target.value); } }, } </script> ``` 此代码片段中，`v-slot:sizes` 被用来替换原有的每页显示数量的选择列表为 `<select>` 下拉菜单，并绑定了事件处理函数以便响应用户的输入变化[^3]。