关于VUE3+TS+antd-vue遇到的坑之a-table返回数据大于pagination.pageSize数据不显示问题

最新推荐文章于 2024-06-01 10:54:36 发布
最新推荐文章于 2024-06-01 10:54:36 发布
阅读量1.9k 收藏 1
点赞数
文章标签： js vue 接口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LoveYouForever2/article/details/116751501
版权

现在各个厂家都在把vue2转成3了，同时js转成ts了，评论区说说我们遇到的坑吧~~~~

目录

首先先说一下标题遇到的问题：a-table返回数据大于pagination.pageSize数据不显示问题

首先先说一下标题遇到的问题：a-table返回数据大于pagination.pageSize数据不显示问题，这个是vue2-3都有的问题

 

我的代码：代码就先不让你们看了，毕竟写法是正确的

主要也是因为我每一页都会请求一次接口（加入pagesize是10那就只会请求10条数据），而antd-vue的官方api - pagination分页机制是按照我返回的总数来分页的，如果直接用就是说只有一页，所以我会每次在改变页数的时候给他的total和tableData赋值

但是就是因为没有注意到他每页返回的值得个数，以为数量都是对的，往后面翻的时候发现有某几页没有数据，但是我就以为我代码的问题，找了半天不知道错哪了，结果，接口里面当前页传了11条数据，让后台改了之后也就没有问题了，这一点也是格外要注意的

hi little boy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2 Element Pagination组件 每页数据量不同的解决方案
白瑕 的博客
09-07 1650
Element pagination, 每页展示不同数据量的解决方案, 单页数据不足会空出空间.
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
浅谈vue获得后台数据无法显示到table上面的坑
10-14
主要介绍了浅谈vue获得后台数据无法显示到table上面的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
数据更新后Ant Design Table组件界面未刷新怎么解决？
最新发布
南城
06-01 550
在使用Ant Design的Table组件时，我们时常需要动态更新表格数据以满足应用需求。然而，有时即使数据已经更新，界面却没有进行相应的刷新。它确保当数据更新时，React能够准确判断哪些行发生了变化，并据此进行最小化的DOM操作。属性是确保Ant Design Table组件在数据更新后能够正确进行界面刷新的关键。如果确实需要使用索引作为临时解决方案，请确保这些操作不会影响到最终展示给用户的数据顺序。通过避免常见问题并采用合适的方法，我们可以提高Table组件的渲染性能和稳定性，为用户提供更好的体验。
关于antd table组件中，数据渲染条数跟后台传入数据不一致的问题
sinat_39648402的博客
07-14 1777
如果出现表格数据渲染 跟后台传过来的数据的条数不一致的情况，绝大概率的rowkey的问题。 我这边当时调试的时候，后台的数据我是存在store中的，包括在table重新渲染的时候，我这边传过来的数据条数都是跟后台的保持一致的，但是渲染的时候 一共六条数据，就只渲染出来一条。于是就看了一下传过来的数据，发现这六条数据的key居然是一模一样的，这也就是为什么明明过来了六条数据，结果表格只渲染了一条。 在网上搜了一下，发现因为rowkey一样，导致渲染的时候数据多于后台传过来的数据，这种情况我还没遇到过。..
ant desgin vue 中的表格分页实现（详解）
qq_57956183的博客
05-15 5647
其中包括需要显示的每页条数、分页条数是否可调、当前页码、总条数等信息。在配置中，我们还可以通过。函数中，我们可以处理翻页的逻辑，并重新请求数据以更新表格。在上面的代码中，我们给 a-table 组件传递了。属性指定一个函数来处理页码改变的事件。
ant design vue a-table组件分页 条目总数不显示问题
noscallion的博客
11-29 3663
a-table a-pagination 总条目不显示问题
Vue开发中的表格分页和常见bug
2302_76493271的博客
05-22 346
当前页如果只有最后一条数据时，删除后当前页面无数据。体验感究极差，懂伐！家人们~ 而且，页码必须大于1！，万一没有数据怎么办嘛，我们需做一点处理。逻辑和上面同理，有一点需要注意下：更改了每页的数量后，需要跳到第一页。不要问我为什么，问就是用户体验~实际开发中处理数据时，这种分页功能时刚需技能。下面就聊一聊基本操作和常见bug！当你点击不同的页数，页面要做出相应的响应，显示不同的数据。大白话将就是将你当前点击的页码数赋给定义的页码数。这个函数是一个页面初始化获取数据的方法哈。
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
Vue3.x 是 Vue.js 框架的最新版本，它带来了许多优化和改进，包括更好的性能、更简洁的 API 和Composition API。Vite 是由 Vue.js 作者尤雨溪开发的新型前端构建工具，它利用了 ES 模块的原生导入功能，实现了更快的...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts+antd 前端基础模板
01-14
vue3结合vite使用typescript搭建的带有路由的轻量级布局模板。 Vue.js 的最新版本，它引入了许多新的特性和改进。以下是一些 Vue 3 的新特性： Composition API：Vue 3 引入了一个新的 API，称为 Composition API。...
pageSize不生效
weixin_54363295的博客
12-28 1723
设置的先后顺序也会导致pageSize不生效
Element-ui Vue 分页器，分页值更新后，UI未显示
mr_raptor的专栏
08-19 7377
原代码： <el-paginationbackground layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" ></el-pagination> 当currentPage更新成5后，下面的分页指示器未同步更新，修改成下面的形式即可同步更新。 <el-pagin.
Ant design vue中的table显示的问题
weixin_49092967的博客
08-31 2977
记录使用a-table过程中因为不熟练遇到的表格不显示问题 前面以为绑定的dataSource是自己写的数组，所以后面一直无法在表格中获取到数据， 后面，修改即可实现 同时需要在data定义数组 效果： ...
ant中表格数据不显示的问题
lirtyuj的博客
07-25 933
data数据不显示的问题是 BasicTable 是没有进行引入的，这是ant增强框架中的一个封装表格组件，引入即可。
后端一次返回大量数据，前端做分页处理
叶子的博客
07-05 691
问题描述：vue + elementui 项目，后端返回大量数据，前端需要做分页处理。(1)、element里面的分页组件，各个字段的含义，4、当前页总条数改变时。
antd pagination onchange 事件不触发，pagination onchange分页请求内容不正确。
Baron的技术blog
11-24 4397
1.antd pagination onchange 事件不触发 背景：无论是 table 内配置还是单独引入pagination组件， 均为正常使用。但是分页成功，onchange 事件却不触发。首先项目中其余页面也有用到分页组件，一切正常。这样就排出了antd 版本的影响。 然后在前端调试antd 源码，发现 total 值的类型不对。因为这个值是从后端直接取回赋值，后端传回来的类型是一个string（实际是因为http传输造成的转换）。 坑的地方就是，还能够成功分页，而且控制台并无报错提示，很不友好
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值