vben table api自定义使用

1,216 阅读1分钟

api return { total: 总数, items: 数据数组, } 格式的数据

const [registerTable] = useTable({
    title: '账号列表',
    api: async ({ page, pageSize }) => {
      const res = await getUserList({
        pageNum: page,
        pageSize,
      });
      /** 一定要返回改格式的数据 */
      return {
        total: res?.total,
        items: res?.list,
      };
    },
    rowKey: 'id',
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    handleSearchInfoFn(info) {
      console.log('handleSearchInfoFn', info);
      return info;
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });

大的数据结构处理,在 utils/http/axios/index.ts中的transform 对象中处理

//  这里 code,result,message为 后台统一的字段,需要在 types.ts内修改为项目自己的接口返回格式
const { code, data: result, message } = data;