proTable翻页时显示的数据量不对的问题

最新推荐文章于 2024-08-15 18:19:19 发布

阿走不走

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量136

点赞数 1

文章标签：前端 react

本文链接：https://blog.csdn.net/weixin_40116860/article/details/138124229

版权

在使用proTable开发过程中遇到翻页后数据增多且序号不匹配的问题，经排查发现可能源于rowkey（id）的重复和未去重的LEFTJOIN查询。通过在SQL语句中添加distinct关键字解决了这一问题。

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

用proTable开发时发现翻页的时候数据会变多，而且序号对不上，比如我页面限制展示十条数据，翻页后会展示十几条数据，如下图

搜了相关问题后发现有可能是rowkey的设置问题，我的rowkey设置的是id，那有没有可能是id重复的问题，果断查了下出问题的数据的sql语句，发现语句用了left join 而且没有去重，最后在sql语句中加了distinct解决问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿走不走

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
proTable翻页时显示的数据量不对的问题

proTable翻页时显示的数据量不对的问题
复制链接

扫一扫

antDesign v4之Pro-Table实用细节

Cvory

05-18

1万+

先上ProTable 的文档官网：https://protable.ant.design/api 最近在antd升到v4版本，发现了这个组件高使用率但是文档不够齐全（或许是我没仔细看）有些隐藏技能需要看源码用熟练了真的很好用问题目录：（文章较长有需要的入） 1.默认值 2.默认PageSize 3.current更新 4.Protable生成查询表单 …<1>配置不显示： …<2> 查询时是Select，表头不显示筛选 5.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 ...

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

antd pro-table实现切换每页个数功能

weixin_44103494的博客

07-20

761

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

Ant-Design-Pro-Components：ProTable组件后台请求数据，表格实现跨页多选,修改行信息，批量提交修改。

~~~

05-25

1091

Ant-Design-Pro-Components：ProTable组件后台请求数据，表格实现跨页多选,修改行信息，批量提交修改。

ProTable添加数据达到表单实时同步新增数据

酒沁的博客

10-10

2288

ProTable添加数据达到表单实时同步新增数据

Ant Design Pro 之 ProTable使用

热门推荐

猩猩的博客

04-29

4万+

标签<ProTable> Pro-Table 是阿里Ant Design Pro V4版本，在Table基础上再封装的一个组件，包含完整的增删改查逻辑，不用复杂的操作，简单几个配置即可实现官网Api地址 https://protable.ant.design/ 示例 V4版本刚出不久，网上的教程还比较少，踩了不少坑，把自己学习过程分享出来，希望可以帮到你创建项目（需...

解决：ProTable一次勾选上千条数据并分页勾选，页面卡顿问题

qq_38969618的博客

07-03

1265

【代码】解决：ProTable一次勾选上千条数据并分页勾选，页面卡顿问题。

React AntDesign Table 动态合并单元格（大量数据有分页时也有效）

Gentman_Dylan的博客

11-09

2943

项目场景：老板要求有相同数据时，那一列就需要合并起来，还能怎么办，硬着 ‘头’ 去实现吧问题描述：看了 Ant design官方文档的旁友可以了解到单元格有一个属性 rowSpan，它的value是数字，数字越大，渲染占据的行数越多，为0时那一个单元格不会渲染，可以看看下方这个不严谨的图由于本人有点菜鸡，所以动态合并的方法是参考了其他兄弟弄出来的，但是后面发现了个问题，他们的解决方法在有翻页的情况会出现BUG，或者是他们接收到后台的数据跟我的不一样，所以才有了这篇文章最开始的方法是通过

Ant Design Pro学习记录—ProTable的使用（一）

岁月佳醉的博客

07-28

1万+

ProTable数据请求、检索、翻页，valueType的使用，时间范围dateRange检索，自定义图片点击预览

Antd table 行列合并且分页正常展示

yue200403的博客

09-08

1798

1.需先对数据进行排。 2.计算合并的行数，value是对应得值，data是表格数据，index是对应得索引，dataIndex是属性值，即对应要合并的行的属性值。 3.效果图，第一页和第二页，分页之后效果杠杠的。 ...

Sniffer Protable抓包视频教程.zip

05-24

目录 01_sniffer介绍.mp4 02_loopbackmode.mp4 03_montorP1.mp4 04_montorP2.mp4 05_抓包过滤器设置.mp4 06_抓包触发器和简单专家分析.mp4 07_菜单栏整体介绍.mp4 08_结束.mp4

Ant Design Pro 之 ProTable使用操作

01-21

标签<ProTable> Pro-Table 是阿里Ant Design Pro V4版本，在Table基础上再封装的一个组件，包含完整的增删改查逻辑，不用复杂的操作，简单几个配置即可实现官网Api地址 https://protable.ant.design/ 示例 V4版本...

proTable组件ppt

08-07

ProTable 组件支持搜索表单单元联动，用户可以输入搜索关键词来过滤表格数据。同时，ProTable 组件也支持远程加载，用户可以在远程服务器上加载数据。搜索表单支持 label、value 插槽，可以根据需要自定义搜索表单的...

FSCapture87 Protable【超好用的截图软件】

03-30

3. 批量处理：对于需要大量截图的工作，FSCapture87 Protable的批量处理功能能够一次性完成多个截图任务，大大提高工作效率。总结，FSCapture87 Protable凭借其全面的截图模式、强大的编辑工具、便携的使用方式...

ASP.NET Core Web API 使用Autofac框架

鲤籽鲲的博客

08-08

657

ASP.NET Core Web API 使用Autofac框架

JAVA-WEB资源配置

最新发布

caryeko的专栏

08-15

164

用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。

使用WebSocket实现一个简易的聊天室

qq_51321722的博客

08-14

392

谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发

epitomizelu的专栏

08-13

779

搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。

ant design pro的protable中显示单选框

05-22

在 Ant Design Pro 的 ProTable 组件中，可以通过使用 render 方法来渲染单选框。以下是一个示例代码： ```javascript import { Table } from 'antd'; const dataSource = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const columns = [ { title: '', dataIndex: 'selected', render: (text, record) => <input type="radio" name="selected" />, }, { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; function onChange(pagination, filters, sorter, extra) { console.log('params', pagination, filters, sorter, extra); } function App() { return <Table dataSource={dataSource} columns={columns} onChange={onChange} />; } export default App; ``` 在上述代码中，我们在 `columns` 中添加了一个 `render` 方法来渲染单选框。该方法会返回一个 `input` 元素，并设置其类型为 `radio`，同时将其 `name` 属性设置为 `selected`，这样就可以保证在同一个表格中只有一个单选框被选中。