Ant Design分页组件中实现禁止点击当前页按钮的方法

最新推荐文章于 2024-02-29 17:39:45 发布
最新推荐文章于 2024-02-29 17:39:45 发布
阅读量293 收藏
点赞数
文章标签： Ant Design javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaohuizhuang6019/article/details/133202382
版权

这里需要使用到Ant Design分页组件pagination的一个回调函数onChange

 onChange函数用来监听鼠标点击事件，

  它有两个入参==》1. 点击分页按钮时获取到的页码   2. 每页最大显示条数 

所以，禁止点击当前分页按钮的核心逻辑是：

if  {当前页的页码 == onChange点击获取到的页码 }  return

如下面代码所示：

 onPageChange是传递给pagination onChange函数的具体实现，通过父组件传递给子组件。

子组件调用时要将额外的当前页参数获取到，然后连同onChange函数自动提供的两个参数，一起传递进来。

以下是子组件中： onPageChange函数的类型定义

kingtopest
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design分页器 重置页码
阿贾克斯
03-24 2653
项目场景： 有一个弹窗,弹窗中包含一个带页码的table和一个搜索框。搜索框可以根据关键字搜索,table展示对应数据,点击页码展示对应数据 问题描述 关闭弹窗,清空搜索框,并重置页码回到第一页 思路： 使用hook+Antd，首先想到的是利用ref去控制,实际操作中，ref.current.setValue('')·可以清空搜索框,但是无法利用ref去控制table中的页码 解决方案： Antd中的Pagination中的api 有两个参数，current和onChange,current是
JavaScript交互效果实战
06-06
静态页面能有啥意思，有互动才叫炫酷前端！本教程为一个前端互动效果合集，包含许多实用的互动小案例以及分页器、轮播图、放大镜、绚烂烟花四个大案例；互动是对DOM、事件、动画的综合运用，熟练制作各种炫酷的交互效果你就能拿到大OFFER！还不速度学起来！最后，作为辣椒与啤酒养大的猿类动物，桫哥风格依旧水煮；
react ant design中table如何关闭分页功能
最新发布
Misnice的博客
02-29 424
关闭分页功能把pagination传false就可以了。
求助, antd 的 steps 组件添加 change 事件后仍不能点击
dengfenglai825的博客
08-05 890
如图，想用 steps 组件分步显示不同信息， 官网上说 添加 change 事件后就可以点击 官网 steps 组件链接 但是我添加后仍不能点击切换，有人遇到过这个情况吗？？？
Vue和elementUI禁用el-pagination的指定分页按钮
楚楚梦厦的博客
06-08 2145
在vue项目中，禁用elementUI的el-pagination的指定分页按钮，适用于后端有最大可查询分页深度的需求。el-pagination添加禁止点击逻辑
Ant Design Pro模板无多标签页解决方案
qq_40895107的博客
05-25 924
白嫖了无尽岁月，我也来写个博客。希望能帮到你！ 网上一些方案都是把官方模板替换成自己写的。本人的方案是在模板的基础上进行添砖加瓦，理解起来更容易！ 解决思路是： 记录页面切换时的路由（onPageChange），在内容部分进行动态渲染（myhref）。 如果出现什么bug了，可以留言给我！ 注： 使用useState对数组进行更新时，需要以新数组的形式对赋值。如：sethref([...array]); 如果我暴露了私人隐私，也麻烦告知我。毕竟是摸鱼的时候写的。 /** * Ant .
vue分页器组件跳转下一页上一页
07-20
在Vue.js开发中，分页器组件是一种常见的UI元素，用于在大量数据中实现分页浏览，提升用户体验。本项目是基于Vue实现的一个分页器组件，具备设置初始页码和输入页码直接跳转的功能。 1. **Vue.js基础知识**： Vue....
react-一款简单的react组件实现的分页
08-15
具体代码中，`Pagination.js`会定义分页组件，通过接收props和管理内部状态来实现分页功能。同时，`public`目录下的CSS文件将为分页组件提供样式。 总的来说，React组件化的思想使得创建像分页这样复杂的功能变得...
分页组件
03-30
在前端，Ant Design和Element UI等UI库内置了分页组件，开发者只需要简单配置就能快速集成到项目中。此外，还有一些云服务提供了API接口，如阿里云的Table Store，内置了强大的分页查询功能，开发者无需关心底层实现...
前端分页样式
02-20
5. UI组件库：如Element UI、Ant Design等，内置了完整的分页组件，可以直接使用。 四、分页效果的高级特性 1. 懒加载：分页加载数据时，仅加载当前页的内容，提高页面性能。 2. 动画效果：通过CSS3动画，使分页...
大通行表格于antdv封装的特殊复杂表格，带通行描述信息、可展示通行的单元格信息、可跨页选择数据功能、分页功能、可编辑单元格功能
06-30
antdv的分页组件提供了丰富的配置选项，如每页显示条数、当前页数指示器等，以满足各种需求。 5. **可编辑单元格功能**：这个特性赋予用户直接在表格中编辑数据的能力，减少了在不同界面间切换的步骤。用户可以快速...
基于AntDesignVue 自定义api方式生成全局加载loading效果
qq_43225508的博客
06-15 3459
基于antdesignvue自定义api生成全屏加载loading
antd输入框禁止输入特殊字符
你，若盛开的专栏
10-24 2784
【代码】antd输入框禁止输入特殊字符。
antd pagination onchange 事件不触发，pagination onchange分页请求内容不正确。
Baron的技术blog
11-24 4402
1.antd pagination onchange 事件不触发 背景：无论是 table 内配置还是单独引入pagination组件， 均为正常使用。但是分页成功，onchange 事件却不触发。首先项目中其余页面也有用到分页组件，一切正常。这样就排出了antd 版本的影响。 然后在前端调试antd 源码，发现 total 值的类型不对。因为这个值是从后端直接取回赋值，后端传回来的类型是一个string（实际是因为http传输造成的转换）。 坑的地方就是，还能够成功分页，而且控制台并无报错提示，很不友好
react antd Pagination函数组件怎么实现切换页面更新数据，代码展示
weixin_35755562的博客
02-16 436
React Antd 的 Pagination 组件可以通过监听页码变化的事件来更新数据。 具体来说，你可以在 Pagination 组件的 onChange 回调函数中处理页码变化事件，当用户点击不同的页码时，就可以在该回调函数中调用更新数据的方法，并将新数据渲染到页面上。 以下是一个示例代码，展示如何使用 Pagination 组件实现切换页面更新数据： import { useState, ...
一行代码antd pro(v4)的绕过权限登录页面
llsixly
03-15 975
ant design pro(v4) 我经常在用，用得还挺舒服的，权限管理、路由设置啥的都挺好用。但是好像一直搜索不到如何绕开这个权限管控，今天研究出来了简单记录一下。解决办法很简单，判断一下路径，不需要权限的路径就直接不要重定向就行了。但是有时候有些页面咱们并不需要登录才允许查看，比如一些公共数据查询。其实这个也是很简答，只是太依赖这个脚手架了，很多基础代码没有去看。其实这个重定向就在最源头的app文件里面。
Ant Design表格分页序号重置问题
qq_32998295的博客
01-27 2011
Ant Design表格分页序号重置问题
antd table 筛选排序远程加载 触发pagination onChange事件
晓风揽月
09-01 4599
背景 在使用antd的Table组件的时候，本来只有正常的翻页需求，然后加了一个表头的筛选功能。如图 本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的onFilter和sorter函数，而是在把筛选和排序的参数发到服务端来处理。 遇到问题如下：按照官网demo添加事件，但是发现写完之后，请求了两次接口，一次带筛选一次不带筛选 没有思路，看到某博主的帖子，发现这是antd一个bug设计#Table 组件排序功能会自动触发 pagination 的 onChange 事件# ...
ant design pro v5 动态菜单
啊彬(Net)
04-22 1768
1.添加获取菜单请求（services/api.ts） export async function currentUserMenus() { return request<MenuDataItem[]>('/api/org/getUserMenus', { method: 'GET', }); } 2.修改app.tsx文件 1）修改getInitialState方法 export async function getInitialState(): Promise<{
ant design vue分页隐藏当前页
09-14
要隐藏Ant Design Vue分页组件中的当前页，你可以使用`show-quick-jumper`属性将快速跳转输入框隐藏起来。这样用户就无法手动输入页码来跳转到指定页。同时，你也可以使用`show-size-changer`属性将每页显示条数选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值