2021-10-15 AntDesign Pro 中 proTable分页展示问题

最新推荐文章于 2024-05-22 17:40:38 发布
最新推荐文章于 2024-05-22 17:40:38 发布
阅读量3.9k 收藏 2
点赞数 1
分类专栏： antd pro 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011341849/article/details/120789381
版权

AntDesign Pro 中 proTable分页展示问题

问题：看提供的示例，protable是一次性请求到数据后，会根据每页展示的条数自动算出总页数。
但是实际应用中。可能存在总数据过多，需要分页请求表单数据的情况。

解决：没细看文档之前，我还想着在怎么处理data数据。阅读文档后发现，有现成的参数可以使用。
在这里插入图片描述
这里传入数据总量就可以啦~

jrls1993
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
04-19
vue3-pro-table 之前有一个是基于 vue2 开发的 vue3-pro-table 是基于 vue3 开发 一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件 特性 将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量 配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果 配置化的表格项，跟 el-table-column 的配置属性类似 配置化的搜索表单，支持大部分表单元素 配置化的分页，跟 el-pagination 的配置属性类似 自定义是否显示搜索和分页 自定义标题栏和工具栏 丰富的插槽提供功能扩展 使用 安装和引入 安装 // npm npm install vue3-pro-table // yarn yarn add vue3-pro-table 引入 该组件依赖
ProTable中切换分页不生效
酒沁的博客
11-21 1616
解决ProTable中切换分页不生效问题
ProComponents之EditableProTable-可编辑表格
最新发布
qyymj的博客
05-22 563
​ 对于初次使用ProComponents组件库的同学来说,官方文档过于复杂,本教程是帮助大家利用ProComponents库中的可编辑表格完成一个简答可编辑树形结构表格。
antd-protable的分页逻辑封装
曲鸟
12-13 2291
封装删除方法，在删除的数据不是第一页且是最后一条数据时则修改current//在非首页的最后一条数据被删除时，改变页码为前一页进行请求 setHandlePagination({});};
ant design之s-table--改变默认分页器
qq_38723394的博客
04-07 2865
ant design之s-table--改变默认分页器 找了好多博客 都是粘贴 拷贝~~~无奈 还是自己动手吧 仅需2步 代码如下 <s-table ref="table" :pagination="pagination" //data中配置pagination :columns="columns" :pageSize="40" //设置默认显示条数 :data="loadData"
AntDesign Pro 中 proTable分页展示问题
Yi_Li_Tong_Wan_DOU的博客
02-17 2155
protable分页实现
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问 了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。@ant-design/pro-table:trophy: Use ...
vue-antdesign-admin-template：Ant Design Pro Vue模板
02-05
蚂蚁设计专业Vue模板根据改造后的开箱即用的后台管理系统模板，优化了很多内容，更轻量，更简洁，可以在此模板上快速，便捷地去建造自己的后台项目。预览：|优化：项目结构和文件夹命名，项目结构更加合理优化：只...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue...
stand-admin-antdpro-demo:适用于Ant Design Pro的CRUD演示
04-07
StandAdmin Demo For Ant Design Pro StandAdmin is CRUD framework work perfectly with Antd Pro. 标准 CRUD 选取控件 多实例 批量操作 异形列表 异形查询 记录复制 多编辑 关联展开 新建初始值 数据转换-新建/...
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face: Ant Design的深色主题。 仍处于实验阶段，欢迎尝试并帮助我们进行改进。 访问进行预览。 安装 $ npm install @ant-design/dark-... 在Ant Design Pro中使用： :
portable详细介绍
07-24
portable, 2.4GHZ天线制作的详细图书
Geeker-Admin中ProTable表格分页之自定义接口页码、尺寸参数
heirui的专栏
10-29 783
鼓捣了半天搞定了与服务端的API接口对接，但在表格分页的时候又遇到了问题，系统默认是pageNum/pageSize这两个参数名用来分页，而服务端是current/size，开始被注释误导，跑去修改组件，但又想起用到的接口来自多台不同的服务器，可能出现分页参数不同的情况。这种对日期组件返回数组值进行二次处理的方式，我也经常用，于是尝试在getTableList里添加自己的分页参数。最近挖了个新玩意儿，Geeker-Admin，看起来感觉挺好。
ProTable自定义翻页写法
winddowes的博客
03-25 3425
ProTable自定义翻页写法 ProTalbe中正常翻页默认20页。自定义翻页写法如下： 1.定义参数 const queryParams = { pageIndex: 1, //定义当前页 pageSize: 10 //定义每页的条数 } 2.在useEffect中传参 useEffect(() => { queryParams.pageIndex = 1; queryParams.pageSize = 10; },[ ] ) 3.在pag
antd pro-table实现切换每页个数功能
weixin_44103494的博客
07-20 694
先在pagination内设置showSizeChanger为true，出现切换每页个数的选择器。之后再给onChange事件添加回调，同时定义一个变量存储当前pageSize，这样就可以了。pro-table自带的分页没有切换每页个数功能，需要自己手动添加。
ant design protable的页码pagination点击一直显示第一页
weixin_39818813的博客
12-08 1327
另外一个方案是，你可以在表格搜索的时候获取表格页码，再把当前的页码数据set到table的config中。如果之前页面一直没有问题，现在突然发现页码点击无效果了，需要注意是是不是执行过。（package.json中），那么更新依赖后它的版本可能变成了。（package.lock.json中），这是因为。，然后在执行npm install，再把。的版本更新了，例如：原来的版本是。表示向上拉最新的版本。
antd ProTable使用分页
weixin_45979310的博客
05-30 1240
【代码】antd ProTable使用分页。
antd protable使用api 翻页
weitao_11的博客
08-14 289
antd protable 使用api 翻页
Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念
热门推荐
weixin_62192841的博客
10-24 1万+
​ 初次接触Ant Design Pro脚手架（以下简称antd pro），并且是第一次使用ProComponents的一些组件，对于自己碰到的一些小坑及样式修改比较耗费时间的地方，进行了记录之--ProTable的使用配置及样式调整。
@ant-design/pro-components 和@ant-design/pro-protable的区别
06-26
@ant-design/pro-table则是Ant Design Pro中的表格组件库，它提供了丰富的表格功能，如分页、排序、筛选、搜索、导出等等，而且还支持多种数据源，包括API、Mock数据和本地数据，非常适合开发中后台管理系统。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值