项目背景
使用vben-admin后台进行公司管理后台的搭建,在调用公司接口后,接口返回了数据,但是列表不展示,是返回的数据格式跟系统的数据字段不相同导致的。
后端返回的数据格式
项目代码
这是vben-admin项目中的原始代码,
在src/settings/componentSettings.ts中
import type { SorterResult } from '../components/Table';
export default {
table: {
fetchSetting: {
pageField: 'page',
sizeField: 'pageSize',
listField: 'items',
totalField: 'total',
},
pageSizeOptions: ['10', '50', '80', '100'],
defaultPageSize: 10,
......
};
修改后的代码
import type { SorterResult } from '../components/Table';
export default {
table: {
fetchSetting: {
pageField: 'page',
sizeField: 'pageSize',
listField: 'content',
totalField: 'totalElements',
},
pageSizeOptions: ['10', '20', '50'],
defaultPageSize: 20,
......
};
公司接口返回的数据放在content字段中,并且数据总量字段为totalElements,
将listField跟totalField按需更改即可
totalField字段是供分页组件展示的,同时 pageSizeOptions以及defaultPageSize是可以修改分页设置的