表格封装useTable TypeScript理解

参照AntD动态合并Form表单项
做项目时遇到封装函数useTable,因为项目中表格基本都使用了这个函数,自己在做自定义新表格时看到这个函数就很疑惑,遇到了各种各样的问题,也不懂ts,在这里试着配合文档理解一下这个函数的功能,之后有了解再继续更新。
-> ts文档
在这里插入图片描述
在这里插入图片描述

试图完成导出表格的功能,使用fetchYearExcel向后端发出请求。下面是封装好的useTable使用。

  const { refresh, searchBy, submit, excelLoading, exportExcel, tableProps } = useTable(
    ()=>Promise,
    fetchYearExcel,
    {
      form: props.form
    }
  )

useTable介绍:

//getData用于获取数据然后传递给表格显示,获得的数据会对应给返回值Result
//getExcel可选参数,联合类型Fuc或Option,向后端发送导表请求
//option可选参数

import { Result, Func, Options } from './types';
export default function useTable<T>(getData: Func<any>, getExcel?: Func<any> | Options, options?: Options): Result;

./types,关于Type详细定义:

//Func是拥有Promise功能的函数
export declare type Func<T> = (...args: any[]) => Promise<T | undefined>;
export declare type TableSetting = {
    total: number;
    onPaginationChange: (pageNum: number, pageSize: number) => void;
    current: number;
    size: number;
};
export declare type Result = {
    refresh: (checkDec: boolean) => void;
    searchBy: (filter: any) => void;
    exportExcel: Func<any>;
    excelLoading: boolean;
    params: object | null;
    setDataSource: (data: []) => void;
    submit: (e: any) => void;
    reset: () => void;
    tableProps: {
        loading: boolean;
        dataSource: any;
        pagination: any;
        onChange: (...args: any) => void;
        setting: TableSetting;
    };
};
export declare type Filters = {
    [key: string]: string | number | undefined;
} | null;
export declare type Options = {
    defaultFilters?: Filters | undefined;
    form?: any;
};

在这里插入图片描述

关于promise:promise MDN
在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值