useTable(推荐使用)

常规实例

TIP

若使用自动按需导入则直接使用useEyTable,无需导入

import {useTable} from 'ey-admin'
const { list, listLoading, page, getTableList, tableChange } = useTable({
  api:promiseApi,// 传入对应的promise接口 页面变化会调用promiseApi并默认传入page、page_size
});
// 手动请求
getTableList()

api默认处理入参为：page、page_size。可按需修改 返回值默认如下,也可按需修改

  data: {
    list: [...],
    otherData: {
      total: 4,
    }
  }

import {useTable} from 'ey-admin'
const { list, listLoading, page, getTableList, tableChange } = useTable({
  api:promiseApi,
  formatHandle(res){
    return res.data.youSelfList//返回值即为list最终值
  },
  totalKey:'data.pageData.total',// 修改为后端对应返回值的total取值
  immediately:true
});

泛型

userTable<T,K>T:list的类型将为list: Ref<T[]> K:searchForm即搜索字段

API

Attributes

成员	说明	类型	是否必传	默认值
api	传入的 api 方法	(searchForm: K) => Promise<AxiosResponse<any> | any>	是	-
pagination	分页信息	PaginationProps 同ant-design-vue	否	-
searchForm	搜索参数	K	否	-
pageKey	搜索时页码字段名	string	否	"page"
pageSizeKey	搜索时分页大小字段名	string	否	"page_size"
totalKey	返回数据的总数字段路径	string	否	"data.otherData.total"
formatHandle	自定义返回数据处理函数	(res: AxiosResponse<any>) => T[] | Promise<T[]>	否	-
setSortField	a-table @change 时设置 sorter	(sorter: unknown) => void	否	-
formatSearchValue	自定义调整 searchForm 入参	(searchForm?: K) => K	否	-
formatTableSearchValue	自定义修改 page，返回值覆盖 page、page_size 入参	(page: PaginationProps) => Record<string, any>	否	-
immediate	是否立即搜索	boolean	否	-

返回值

成员	说明	类型
list	列表数据	Ref<T[]>
listLoading	loading 状态	Ref<boolean>
page	用于 ant-design-vue 的 pagination	PaginationProps
getTableList	手动发起请求 —— search 即点击搜索，page 重置	(type?: 'search') => any
tableChange	同 ant-design-vue 的 change 事件	(pagination: PaginationProps, _?: any, sorter?: unknown, source?: any, immediately?: boolean) => void
resetPagination	页码重置	() => void