概述

table 请求封装hook。

实例演示

// normal
const searchForm = reactive({})
const list = ref<ListItem[]>([]);
const listLoading = ref(false);
const page = reactive<PaginationProps>({
    current: 1,
    pageSize: 10,
    total: 0,
});
async function getTableList() {
    listLoading.value = true;
    try {
        const res = await queryTableList(params);
        list.value = res.data.list;
        page.total = res.data.page_info.count;
    } finally {
        listLoading.value = false;
    }
}
function tableChange() {
    getTableList();
}
...

// 🥳 useTable
const { list,listLoading,listLoading,getTableList,tableChange } = useTable({
    api: queryTableList,
    searchForm: {},
})

配置

useTableOption

参数	说明	类型	默认值
api (必填)	获取表格数据的后端接口	Function	--
searchForm	表单搜索对象	Record<string,any>	{}
pagination	自定义分页配置项	PaginationProps	--
extraParams	搜索额外参数	Function
pageKey	当前页码参数	String	page
pageSizeKey	表格一页请求数量非特殊情况不要配置	String	page_size
totalKey	数据总数的 key，非特殊情况不要配置	String	meta.pagination.total
formatHandle	自定义格式化函数	Function	--
setSortField	对整体数据进行排序，在tableChange 时触发	Function	--
formatSearchValue	在请求之前调用一次来格式化参数	Function	--
formatTableSearchValue	在请求时时格式化分页参数	Function	--
immediate	初始化时立刻调用	Boolean	false
tabChangeCallback	分页切换回调	Function	--

TableResult

参数	说明	类型	备注
list	表格数据，data-source	Array
listLoading	表格loading效果	Boolean
page	分页配置	PaginationProps
getTableList	获取（更新）表格数据方法	Function
tableChange	表格onChange事件	Function
resetPagination	重置表格分页	Function

类型定义

export interface UseTableOptions<T, K extends Record<string, any>> {
  api?: (searchForm: K) => Promise<AxiosResponse<any>>;
  pagination?: PaginationProps;
  searchForm?: K;
  extraParams?: (searchForm) => Record<string, any>;
  pageKey?: string;
  pageSizeKey?: string;
  totalKey?: string;
  formatHandle?: (res: AxiosResponse<any>) => T[] | Promise<T[]>;
  setSortField?: (sorter: unknown) => void;
  formatSearchValue?: (searchForm?: K) => K & Record<string, any>;
  formatTableSearchValue?: (page: PaginationProps) => Record<string, any>;
  immediate?: boolean;
  tabChangeCallback?: () => void; // 切换分页时触发回调
}

export interface TableResult<T> {
  list: Ref<T[]>;
  listLoading: Ref<boolean>;
  page: PaginationProps;
  getTableList: (type?: string) => any;
  tableChange: (pagination: PaginationProps, _?: any, sorter?: unknown, source?: any, immediately?: boolean) => void;
  resetPagination: () => void;
}