一.问题背景
最近在搞一个英语学习平台管理系统的时候,遇到了一个问题,莫名奇妙报了一个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的使用可以参考一下:

在开发英语学习平台管理系统时遇到pagination校验错误,问题源于Table组件缺少必要属性。分析发现数据源未包含pageNo、totalPage和totalCount等信息。通过补充这些属性并从后台接口获取相应数据,成功解决错误。总结发现s-table组件需要特定数据格式,但实际只需要data、pageNo和totalPage即可正常工作。
5068





