vue项目中使用elementUI分页的遇到的问题

最新推荐文章于 2024-06-20 15:40:46 发布
最新推荐文章于 2024-06-20 15:40:46 发布
阅读量1.3k 收藏
点赞数
分类专栏： vue项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41931052/article/details/104174225
版权

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200204200436790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxOTMxMDUy,size_16,color_FFFFFF,t_70
点击 查看计划表安排表 出现对话框 数据
在这里插入图片描述
数据显示要求 如果信息条数多余50则显示分页 进行数据展示
本人出现的问题 ：当点击专业1弹出的对话框时 显示时看到第二页，返回查看其他专业的计划安排表时分页高亮在第2页

解决办法：

在这里插入图片描述
给el-pagination添加一个v-if条件判断，首先设置为false，隐藏掉页码，在数据请求时判断信息条数是否多余50条 是则改为true，这样el-pagination就自动认为自己处在第一页了
在对话框关闭时改为false 相当于一个初始化el-pagination的小方法

前端大可爱
关注
专栏目录
前端开发模块VUE-Element UI学习笔记
旺仔Sec&blog
08-12 2733
基于 Vue 的一套桌面端组件库，提前封装好的 UI 模板，方便开发者快速搭建一个网站前端界面。官网：https://element.eleme.cn/
解决：springboot+mybatisplus+vue+elementUI实现分页功能时遇到的问题
qq_40222207的博客
04-03 2582
解决：关于使用axios获取后端传回的数据问题问题描述新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 问题描述...
element-分页超出问题
最新发布
qq_38937194的博客
06-20 360
通过查阅element的分页组件的配置项可知，该属性是页码按钮的数量，当总页数超过该值时会折叠，默认是7，更改一下该值即可。解决思路：如果遇到以上分页组件超出了左侧列表所在的盒子最大宽度的问题，除了费劲巴拉的改样式之外，可以关注一下分页组件自带的。解决代码红线所示如下：我这里是设置了该值为3，正好可以完全展示，可以根据自己页面灵活设置。
elementui 分页el-pagination遇到的所有坑（current失效、分页组件不显示、视图不改变等）
南北极之间
02-16 2万+
el-pagination 分页的坑很多 专门记录一下
el-pagination一页隐藏，单页隐藏
weixin_39921970的博客
04-24 798
hide-on-single-page <div class="fenye" style="margin-top: 40rpx;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" background :page-size="per_pag
element ui 分页： 页面 div 切换显示隐藏后 ，分页状态问题？
jyy5806的博客
06-21 2504
网站使用到了element ui 的分页功能，但是因为， 页面有tab切换然后调用对应的搜索列表接口，由于数据过多，会有分页产生，有时候在tab1 点击分页到第三页，再切换到tab2后， 查看信息，继续切回tab1,此时分页停留在 第三页，而不是自动刷新为第一页的问题。 解决方法， element ui 的分页功能有一个 current-page的 参数，在分页上添加该参数， 然后在data...
element -ui的el-pagination组件踩坑，:total属性赋值页面展示不出来的问题
热门推荐
我的代码没有Bug的博客
11-23 3万+
element -ui的el-pagination组件踩坑，:total属性赋值页面展示不出来的问题。组件代码：![在这里插入图片描述](https://img-blog.csdnimg.cn/20181123170915420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9...
详解vue修改elementUI的分页组件视图没更新问题
01-22
今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的...
后台系统+elementUI的分页器功能的实现及相关问题的解决
weixin_48420104的博客
04-12 1362
table 是支持高度设置的：height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。首先给父盒子添加一个90&的高度，然后在table组件添加 height="90%",给它一个90%的高度。就会跟着外部盒子的大小而改变。
vue-项目使用过程中遇到的一些问题
ruko9805的博客
04-25 494
vue-项目使用过程中遇到的一些问题 最近项目比较忙，五一前要把初版做完，周六加了一天班，今天收尾，明天做测试联调，改改bug，后面再找用户提提意见，估计晃晃悠悠就到五一了。 项目确实让人成长，我是个新手，项目过程中不是难免，是必定遇到了很多问题，我想记下来，一些技术上的盲点，还有一些思维上的盲点。 问题一 Cannot read property ‘xxx’ of undefined 这类问题 这个错误，在vue代码撰写中经常遇到。 原因主要分为这几类 原因一、你调用的数据没有初始化 解决方法，在你
elementUI分页组件实现表格数据序号累加功能
m0_57712926的博客
09-02 1443
文章目录前言一、基本结构二、效果预览总结 前言 Vue项目借助elementUI开发后台管理系统时，遇到的一个需求，就是每页展示5条数据，数据序号为1-5，下一页就需要从6开始，以此类推…一起来看看如何实现吧~ 一、基本结构 使用elementUI提供的表格组件和分页组件 表格组件 序号那一列将type设置为index,可以让这一列内容按照索引排序， 索引+1即为第几条数据。 可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。 分页组件 监听size-chang
elementui 分页器，el-pagination 不显示的问题
qq_68155756的博客
03-09 5745
今天敲代码遇到了个很操蛋的问题，分页器不显示，我把分页器封装成共用组件，一个组件显示分页器，另一个组件不显示分页器，我心想这么邪门的吗
Element ui table表格内容超出隐藏显示省略号
m0_58565372的博客
09-20 1万+
tips的class名为.el-tooltip__popper，我们可以写css样式，但需要注意的是，在样式里面写scoped，.el-tooltip__popper样式无效，但是去掉scoped又有可能影响到其他页面的样式，解决办法就是，再写一个样式。给el-table-column设置:show-overflow-tooltip="true"属性可以使单元格超出的内容被隐藏显示为...当鼠标移入时单元格的上方会弹出一个tooltip来显示单元格的所有内容。
Element-ui Vue 分页器，分页值更新后，UI未显示
mr_raptor的专栏
08-19 7431
原代码： <el-paginationbackground layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" ></el-pagination> 当currentPage更新成5后，下面的分页指示器未同步更新，修改成下面的形式即可同步更新。 <el-pagin.
element-ui中el-table根据浏览器的缩放自适应宽度
邱先生的博客
10-21 1万+
最近有个pc端的项目，要求浏览器缩放的时候可以自适应宽度，但在使用element-ui中的el-table出现了点小问题，table-header、table-body的宽度是js动态计算的固定宽度 在网上找了一些办法、包裹一层父元素并添加position:relative,子元素添加position:absolute;width:100%,亲测是可以达到自适应的效果的. 但是！如果在table下面还需要编写页面，由于table的绝对定位，样式会乱. 其实也简单，动态计算table的高度并赋值给父元素撑起
ElementUI分页功能
weixin_44960905的博客
08-26 6003
使用ElementUI实现分页显示数据
使用element-ui的el-table和el-pagination标签实现表格分页功能以及解决遇到的暂无数据的bug
Arlisol的博客
02-24 9565
博主需要在项目中需要使用el-table和el-pagination标签实现表格分页功能，方法如下： el-table标签的data属性是显示的数据，绑定为showTable计算属性 &lt;el-table :data="showTable" :header-cell-style="{background:'#eef1f6',color:'#606266'}" ...
element-ui Pagination分页只保留上一页下一页
一只没有脚的鸟
11-01 1646
有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。
elment-ui el-pagination 缩减页码的显示值
vanora1111的博客
04-21 2770
根据产品大大的指挥 来修改样式 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。 ...
vue项目怎么使用elementui
03-20
您可以通过以下步骤在 Vue 项目中使用 ElementUI： 1. 在项目中安装 ElementUI：使用 npm 或 yarn 安装 ElementUI。 2. 在 main.js 中引入 ElementUI：在 main.js 中添加以下代码： import ElementUI from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值