解决vben-admin后台管理系统中数据列表无法展示的问题

项目背景

使用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是可以修改分页设置的