el-pagenation 组件 删除时候的 页码减一

最新推荐文章于 2022-12-24 10:37:50 发布
最新推荐文章于 2022-12-24 10:37:50 发布
阅读量281 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/josiecici/article/details/117814626
版权

如果删除数量的等于当前页数量的时候 并且当前页大于1 则当前页减1 子组件内的currentpage也减1

if   （  arr.length == this.tableData1.length && this.fatherCurrentPage1 > 1）{
this.fatherCurrentPage1 = this.fatherCurrentPage1 - 1
this.$refs.pagenation1.currentPage=this.fatherCurrentPage1
}
星良辰寻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element 中 el-menu 组件的无限极循环思路代码详解
10-15
主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue解决 element 翻页插件：删除最后一页的所有数据后(包括批量删除)，刷新后数据表格为空。
m0_65331985的博客
10-27 330
vue解决 element 翻页插件：删除最后一页的所有数据后(包括批量删除)，刷新后数据表格为空。
element 前端分页及删除某条数据
qq_36364963的博客
03-03 945
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[10]" :page-size="limit" layout="total, prev, pager, next, jumper" :total="total" ...
element分页在当前分页删除数据,删除完就跳转到第一页解决方法
luoxiaonuan_hi的博客
06-17 1867
element分页在当前分页删除数据,删除完就跳转到第一页解决方法
Element分页组件做删除功能时的分页异常处理
大牛的博客
09-05 319
问题 如果删除第最后一页（例如4）的最一条数据之后，页面会显示不正常 原因 如果删除最后一页的最一条数据之后，再发请求，还是求的第4页, 而此时,由于数据已经删除了，所以就找到不到第4 页的数据了。 思路 在删除成功之，去检测一下，是否当前删除的是最后一条数据，如果是，就把页码-1，再发请求 async doDel(id) { try { const res = await delEmployee(id) console.log('del
列表最后一页的最后一条数据删除之后，页码自动减一
hj300327的博客
04-16 491
删除文件列表最后一页的最后一条数据，页码自动减一
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
10-17
主要介绍了element-ui 的el-button组件中添加自定义颜色和图标的实现方法，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。需要的朋友跟随小编一起看看吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-pagination 切换页数时，页码消失
kzj0916的博客
09-16 2412
el-pagination 切换页数时，页码消失 最近用el-pagination请求数据时发现，请求过来的数据切换页码时，下面的页码不可选，即为空了。。。 调试了一会才明白了问题所在 问题所在 问题的关键在于数据，因为我的总数是每次切换页码时都要请求一次，后面才发现除了第一次，后面的值都为undefined，即只有第一次数据中才有总数值，所以我就修改了只获取一次总数。 总结 请求总数时最好只在刚开始请求一次，后续数据中可能不存在，就会出现问题。 ...
element-Pagination分页问题
lzxy1213的博客
05-09 1350
element-Pagination在点击换页或者点击搜索按钮应该回到第一页的时候，页面未被激活，即页码未改变。 百度搜索，尝试了很多种方案，比如 加上current-page.sync修饰、结合localStorage利用created()beforeUpdate ()beforeDestroy ()方法，重置current-page属性值..不知道是我没写对还是其他原因，最后都没成功...
elment-ui el-pagination 缩减页码的显示值
vanora1111的博客
04-21 2569
根据产品大大的指挥 来修改样式 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。 ...
前端实现el-pagination分页组件纯前端分页使用方法
Lguorong的博客
08-17 6062
又是被后端欺负的一天，做了个公司的老项目，表格分页后端没法做，那就只能前端来完成。这里我介绍两种方法，需要的自提
Element中el-page-header页头的用法
m0_51044151的博客
04-30 7185
在开发项目中使用到页头这一组件，官网描述很简单，这个组件本身也很简单 去官网看看 官网就只给出这一个例子以及相关参数事件。我今天所说的就是back这个事件，这个就是页头跳转所触发的事件，通过官网给出的代码来看，需要执行goBack()方法。 因此我们可以通过该方法编写想要跳转的路径 html代码 <el-page-header @back="goBack" :title="title" style="color: #4490f1"> 我是使用Steps 步骤条才使用的这个组件，因为修改页头
el-pagination 动态切换每页条数、页数切换
一起加油吧~
12-24 6923
当表格中的数据量如果非常庞大的时候我们不可能让数据整个全部一下展示出来，导致用户需要无限的往下滚动鼠标，给用户造成不清楚到底有多少数据的一个现象，让用户产生看不到头的焦躁心理。这时候我们可以借助分页器去实现数据的分页效果，根据页数和每页条数去实现真分页。
关于Pagination 分页的那些破事--Element
weixin_46084100的博客
06-14 479
关于Pagination 分页的相关解析
element pagination不显示第二页发问题， pagesize小于10不显示第二页
weixin_46700289的博客
11-10 1057
element pagination 不显示第二页
vue elementUI el-pagination 分页器的使用细节
qq_41974250的博客
03-23 6761
vue elementUI el-pagination 分页器的使用细节
vue2手写一个el-pagenation
最新发布
07-04
当然可以，以下是一个手写的Vue 2的el-pagination组件的示例代码： ```html <template> <div class="el-pagination"> <button @click="prevPage">Previous</button> <ul> <li v-for="page in pageCount" :key="page" :class="{ active: currentPage === page }"> <a @click="changePage(page)">{{ page }}</a> </li> </ul> <button @click="nextPage">Next</button> </div> </template> <script> export default { data() { return { currentPage: 1, pageSize: 10, total: 100 }; }, computed: { pageCount() { return Math.ceil(this.total / this.pageSize); } }, methods: { changePage(page) { this.currentPage = page; // 触发页码改变的事件，可以在父组件监听该事件并更新数据 this.$emit('page-change', page); }, prevPage() { if (this.currentPage > 1) { this.changePage(this.currentPage - 1); } }, nextPage() { if (this.currentPage < this.pageCount) { this.changePage(this.currentPage + 1); } } } }; </script> <style scoped> .el-pagination { display: flex; justify-content: center; align-items: center; } .el-pagination button { margin: 0 5px; } .el-pagination ul { list-style: none; display: flex; } .el-pagination li { margin: 0 5px; } .el-pagination li a { text-decoration: none; color: #333; padding: 5px; } .el-pagination li.active a { font-weight: bold; } </style> ``` 这是一个简单的分页组件，包含了上一页、下一页按钮以及页码列表。你可以根据需要进行样式的修改和功能的扩展。希望能帮到你！如果还有其他问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值