【vue项目】分页数据显示问题

已于 2023-09-15 19:40:49 修改
阅读量505 收藏 2
点赞数
分类专栏： mybatisplus vue 文章标签： vue.js
于 2023-05-16 18:12:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiqo/article/details/130711092
版权

今天做的项目有个需求，就是点进页面时，分页绑定的数据有个属性值工单SFC是不能直接获取到的，需要从中取出工单号发送请求查询才能得到
现遇到的问题是，查询到的工单SFC再赋值作为显示数据的一个属性时，不能显示
在这里插入图片描述
在这里插入图片描述

新增的数据栏没有显示数据
在这里插入图片描述

其实原因很简单，就是不能先更新this.list，页面数据显示只看你的this.list数据的第一次更新情况；如果先更新，再发送查询的数据请求，把查询值再赋给this.list作为属性，页面数据就不会更新了

这里我们只需要一个中间变量Vice即可
在这里插入图片描述
数据可以显示
在这里插入图片描述
吃一堑，长一智 (/= _ =)/~┴┴

陈宁宁Ninging
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue显示分页数据
sinat_33940108的博客
03-06 1107
@RestController @RequestMapping("/v1/question") @Slf4j public class QuestionController { @Autowired IQuestionService questionService; @GetMapping("/my") public R<PageInfo<Question>> my(Integer pageNumber){ if (pageNumb
JAVA spring boot + vue 解决分页查询无法实现问题
qq_36840040的博客
07-23 444
分页查询失败前端 前端 queryByPage(pageNum, pageSize, searchData) { var _this = this; //debugger; this.getRequest('/api/bmsh/bmsh/' + pageNum + '/' + pageSize, searchData).then(result => { if (result && result.status ===
springboot+Vue实现分页
最新发布
xdg15294969271的博客
04-25 1390
今天开发的有一个场景就是需要从远程ssh服务器上加载一个文件展示到前端，但是一次性拉过来有几万条数据，一下载加载整个文件会导致前端非常非常的卡，于是要使用分页解决，我之前看过的有mybatis的分页查询解决方案，哪个是封装好的，但是我的场景是查询文件实现分页展示，因此需要写一个个性化的分页逻辑。
vue2+ElementUI分页器换页查询不到
m0_71831069的博客
08-04 764
问题分析：因为在第一页查询的时候page = 1，经过计算截取位置，刚好是从最开始截。但是此时的page = 2....，回来的数据放在列表中，分页器在截取的时候，计算截取位置，刚好错过列表中的数据，导致截取不到。在查询之后将分页器的page = 1，这样当数据回来，分页器截取的时候是从最开始截取，就可以截取到数据，显示在第一页。在使用分页器的时候，明明是查的所有数据，在第一页做查询操作可以查到，但是切换到其他页就查不到了。page表示页码，pageSize表示一页几条。这里可以看到在第一页是可以查到的。
vue页面跳转没有刷新数据
qq_42314022的博客
01-18 1203
情景： A页面新增数据，B页面查看新增数据，B页面查看不到刚刚新增的数据 原因： 页面B加载时，没有执行created（）函数，所以可能是使用了缓存数据 解决方法： 将created（）或mounted（）函数中执行获取数据的方法放到activated（）函数中， activated（）函数：每次页面加载就会执行该函数 同时该函数也可以获取到路由传递过来的参数 methods:{ /** * 获取数据 */ getDataList(){ request({
Vue编写的页面部署到springboot网站项目中出现页面加载不全问题
weixin_44743583的博客
07-25 727
  问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ,但是放到公司的大项目中就出现了问题 只能加载出来头部内容 , 其他内容消失不见了 发现问题所在 F12 我F12查看界面结构 , 发现App.vue 这个文件的内容都加载出来了 , 其他的组件还有一些其他的东西都没有 . 需要重写 我不得不重新编写一遍 , 这次不使用脚手架 , 就像 jque
vue实现前端分页完整代码
10-15
总的来说，这个Vue实例提供了一个基本的前端分页实现，但实际项目中还需要考虑更多的细节，比如错误处理、数据加载状态显示、用户交互优化等。理解并熟练掌握这些知识点，可以帮助你构建更高效、用户体验更好的前端...
Vue实现简单分页器
10-17
1. **引用依赖**：首先，确保项目中引入了jQuery、Vue.js和自定义的分页插件`jgPaginator.js`。这些文件需要按照正确的顺序加载，通常是先加载jQuery，再加载Vue，最后加载自定义插件。在HTML文件中，可以通过`...
vue实现分页栏效果
12-03
以上代码仅为示例，实际项目中可能需要处理更多细节，如分页栏的样式、省略号表示更多页码、动态加载数据等。Vue.js 提供了强大的响应式系统和组件化能力，使得实现这样的功能变得简单和高效。 总之，Vue.js 实现...
基于vue实现分页效果
11-26
虽然这两个示例提供了基本的分页效果，但实际项目中可能需要更复杂的分页功能，如跳转到指定页、每页显示条目数的选择等。为了实现这些功能，可以扩展Vue实例，增加更多的数据属性和方法，例如： 1. `currentPage`...
Avuepaginationcomponent一个vue分页组件
08-12
A vue pagination component 一个vue分页组件
Vue分页组件.vue
06-22
（原创）这是一个功能比较完善的vue分页组件，包含基本的数据统计，页面跳转，修改每页显示条数，当前页居中显示等，有兴趣的可以直接拿来用。
vue实现分页的三种效果
10-15
在Vue.js中实现分页是常见的前端开发任务，主要用于处理大量数据时的用户体验优化。这里我们将探讨三种不同的分页效果，适用于不同的场景和需求。 ### 第一种效果：简单静态分页 这种效果适用于数据量不大的情况，...
关于VUE中多层异步请求得到的数据，模板解析数据获取不全
weixin_46133178的博客
07-02 742
今天在做一个-尚-硅-谷-的项目尚品汇时遇到一个问题，就是我在vuex中的actions通过三层异步请求 获取数据时获取到了完整数据,但是在相关组件中渲染时候，只渲染了第一级菜单二三级未渲染，但是数据确实存在的，如右图。经过网上查阅，可能是异步请求还未完成模板就渲染完成，导致数据显示不全（个人理解），想了一会解决办法。我的思路是：既然数据是存在的，但是模板却在数据完全获取之前解析完成，那么只需要重新渲染二级菜单模板或者先不渲染二级菜单，等到用时（hover）再渲染即可获取到数据，然后我就想到了v-if，
elementui分页器不显示total总数
weixin_48193493的博客
08-20 680
分页器的total是integer型才会生效， 如果向后端发送请求，返回的数据 total是string型，那么就会出现这个问题。第一次做项目，遇到了好多次这个报错，但是每次都记不住...就记录一下吧。处理一下total的格式就好了。
vue中el-pagination分页属性:total总数不显示问题
a896532147的博客
02-29 1474
1，在elementui组件库中选择适合的分页组件el-pagination，导入到项目中，如何修改:page-size="?",:total="?此时你只需将返回的total类型转换就可以了，vue中String类型转换为int如何装换？的total是integer类型， 如果向后端发送请求，如果后端返回类型如下。说明你返回的total类型为String,这时你的页面显示就为空。2，导入后做如下修改并在data中定义。3，接入后端接口为何不显示呢？这时你的分页器内容就会显示了。
Vue项目之分页功能只显示第一页，后面有数据点击第二页也不显示
m0_49245701的博客
01-14 7107
最近遇到做项目遇到了一个小问题，就是我已经设置了6条数据，但是点击第二页却不显示第二页的数据，仍然在第一页，如下图 首先总条数是对的，说明后端返回回来的数据是正确的。 然后去前端查找与分页相关的内容，结果发现前端vue的方法里面并没有将后端返回的page和size赋给我们前端的变量。（如果不确定val是什么，可以照图中console.log一下） 所以，将其改正过来（记得赋值后，要再调用一遍刷新获取数据的方法），就大功告成啦。 以后可不要再这么粗心了 ...
Vue3-数据分页展示的处理
weixin_51029697的博客
05-13 1104
一、数据分页template <template> <div class="select-box"> <!-- --------------------搜索---------------------------- --> <el-form :inline="true" :model="selectData" class="demo-form-inline"> <el-form-item label="标题搜索">
avue分页显示bug
weixin_39773501的博客
05-24 1713
avue分页显示bug 后端未全部查询数据 只显示部分数据，总共18条只显示16条 寻找ing
vue项目element plus 表格分页
07-16
对于Vue项目中使用Element Plus进行表格分页，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Element Plus插件。你可以通过以下命令进行安装： ``` npm i element-plus ``` 2. 在你的Vue项目的入口...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值