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

最新推荐文章于 2024-07-18 09:23:55 发布

jrls1993

最新推荐文章于 2024-07-18 09:23:55 发布

阅读量4k

点赞数 1

分类专栏： antd pro 文章标签：前端

本文链接：https://blog.csdn.net/u011341849/article/details/120789381

版权

antd pro 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在AntDesignPro的ProTable组件中，通常情况下，组件会一次性获取所有数据并根据每页显示数量自动计算页数。然而，当处理大量数据时，这可能导致性能问题。解决方法是利用ProTable的分页请求功能，通过设置参数来实现按需加载数据。这样不仅能提高应用性能，还能优化用户体验。

摘要由CSDN通过智能技术生成

AntDesign Pro 中 proTable分页展示问题

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jrls1993

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue2中，Ant Design Pro s-table中，使用服务端排序怎么做？

走向CTO的路上...

08-10

在 Vue 2 中使用 Ant Design Pro 的组件进行服务端排序，你需要监听表格的排序事件，并在发生排序变化时向服务器发送请求以获取排序后的数据。以下是一个示例，展示了如何实现这一功能：确保你已经安装了和等依赖包。步骤 2：引入和注册组件在你的 Vue 项目中，引入并注册 Ant Design Vue 的 Table 组件。步骤 3：创建组件并实现服务端排序假设我们要实现一个带有服务端排序功能的表格，具体代码如下：解释定义表格列：数据初始化：数据获取函数

Geeker-Admin中ProTable表格分页之自定义接口页码、尺寸参数

heirui的专栏

10-29

842

鼓捣了半天搞定了与服务端的API接口对接，但在表格分页的时候又遇到了问题，系统默认是pageNum/pageSize这两个参数名用来分页，而服务端是current/size，开始被注释误导，跑去修改组件，但又想起用到的接口来自多台不同的服务器，可能出现分页参数不同的情况。这种对日期组件返回数组值进行二次处理的方式，我也经常用，于是尝试在getTableList里添加自己的分页参数。最近挖了个新玩意儿，Geeker-Admin，看起来感觉挺好。

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

Ant Design Pro --------------- ProTable高级表格细节用法（持续更新中...）

qq_48718857的博客

01-07

1万+

二次封装antd的ProTable、EditableProTable，结合use-antd-resizable-header，做一个列可伸缩的表格组件

最新发布

m0_56298143的博客

07-18

467

ProTable + use-antd-resizable-header 做一个可伸缩列的表格组件

ProTable中切换分页不生效

酒沁的博客

11-21

1741

解决ProTable中切换分页不生效问题

antd ProTable使用分页

weixin_45979310的博客

05-30

1330

【代码】antd ProTable使用分页。

antd-protable的分页逻辑封装

曲鸟

12-13

2349

封装删除方法，在删除的数据不是第一页且是最后一条数据时则修改current//在非首页的最后一条数据被删除时，改变页码为前一页进行请求 setHandlePagination({});};

ant design之s-table--改变默认分页器

qq_38723394的博客

04-07

2928

ant design之s-table--改变默认分页器找了好多博客都是粘贴拷贝~~~无奈还是自己动手吧仅需2步代码如下 <s-table ref="table" :pagination="pagination" //data中配置pagination :columns="columns" :pageSize="40" //设置默认显示条数 :data="loadData"

AntDesign Pro 后端实现分页，前端表格展示数据及分页

weixin_44056269的博客

12-05

1028

3.从后端获取数据进行渲染，Table及分页相关参数可以参考。

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 引入该组件依赖

Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(二)

热门推荐

谷子的博客

07-11

2万+

在之前的一篇文章中，对S-Table组件的的数据加载和数据渲染，以及分页参数的使用进行了描述： https://blog.csdn.net/gu_wen_jie/article/details/90702427 这一篇中，我想展示的是关于如何使用slot插槽来进行一些数据的过滤展示，或者说成过滤不是太准确，但是用到的确实就是过滤器，filters,具体的场景就是：比如后端给你返回的一个字段：...

portable详细介绍

07-24

portable, 2.4GHZ天线制作的详细图书

React Admin 前端脚手架之ant-design-pro

西京刀客

01-04

2553

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

@ant-design/pro-components 和@ant-design/pro-protable的区别

06-26

@ant-design/pro-table则是Ant Design Pro中的表格组件库，它提供了丰富的表格功能，如分页、排序、筛选、搜索、导出等等，而且还支持多种数据源，包括API、Mock数据和本地数据，非常适合开发中后台管理系统。...

antd中分页器如何自定义_ant-design-vue Table组件和分页组件的自定义

weixin_39651816的博客

12-20

1820

最近在个新项目里开发CMS端，vue技术栈和antd的UI框架表格table使用链接：antd的table分页pagination使用链接：antd的pagination表格单独使用时，自带简单分页，只包含上一页, 页面码, 下一页,例如：但是有时候产品和甲方的需求很奇葩，非得可选的pageSize，显示总数等功能，文档里有时候也阐述不全，甚至不对，关键时候还要靠自己动动脑子，看代码：//tem...

AntDesign Pro 中 proTable分页展示问题

Yi_Li_Tong_Wan_DOU的博客

02-17

2213

protable分页实现

ProTable自定义翻页写法

winddowes的博客

03-25

3583

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

822

先在pagination内设置showSizeChanger为true，出现切换每页个数的选择器。之后再给onChange事件添加回调，同时定义一个变量存储当前pageSize，这样就可以了。pro-table自带的分页没有切换每页个数功能，需要自己手动添加。

ant design protable的页码pagination点击一直显示第一页

weixin_39818813的博客

12-08

1369

另外一个方案是，你可以在表格搜索的时候获取表格页码，再把当前的页码数据set到table的config中。如果之前页面一直没有问题，现在突然发现页码点击无效果了，需要注意是是不是执行过。（package.json中），那么更新依赖后它的版本可能变成了。（package.lock.json中），这是因为。，然后在执行npm install，再把。的版本更新了，例如：原来的版本是。表示向上拉最新的版本。