一.问题背景

最近在搞一个英语学习平台管理系统的时候,遇到了一个问题,莫名奇妙报了一个pagination的校验错误警告,这可把我整懵逼了看了一下代码,也没有错撒,而且我之前封装的组件用的好好的,怎么就错了呢?然后开始对问题进行剖析。
在这里插入图片描述

二.问题分析

要想解决问题,首先就要对问题进行定位,从控制台中可以粗略的看到,问题大概是出在Table表格组件上。好,我先翻到使用表格组件的地方:
在这里插入图片描述

嗯。貌似没看到相关的pagination的属性,再看看传入s-table中的数据源data和列属性colums:
在这里插入图片描述

对比一下调用之前封装的组件:
在这里插入图片描述嗯?发现一个小问题,数据源的返回值好像不一样!但是,这都是从后台直接拿的数据撒,等等,先去看一下出问题的地方,所调用的接口返回的数据是哪些?
在这里插入图片描述好家伙!只有一个数据data数据源, 而pageNo初始分页页码, totalCount总记录条数,totalPage总页数,以及pageSize分页大小,这些属性统统没有!问题差不多定位到了。既然后台没有返回这些数据,那我们就造呗,当然原则上还是要和具体的数据相符:
在这里插入图片描述pageNo和pageSize都是可以从parameter 里拿到的:
在这里插入图片描述data从接口里拿,totalCount直接通过计算data数据源的数组长度就可以得到,totalPage = totalCount 除以 pageSize,也是一个很简单的事。
在这里插入图片描述

果然,补充上这些属性后就基本没报错了。

三.总结

其实归根到底,还是我引用的一个类似官方组件Table,但是又更方便的s-table组件的一个属性返回问题,s-table 规定要返回必要的一些属性,比如数据源要包括data, pageNo, totalPage, totalCount, pageSize。但是,实际上我经过测试发现,其实数据源只要返回三个data, pageNo, totalPage就可以了,其他可以不要。
具体对s-table的使用可以参考一下:

s-table使用

Logo

快速构建 Web 应用程序

更多推荐