Appearance
useListFetch
路径:frontend/src/composables/list/useListFetch.ts
为列表页提供 list 请求、分页状态、可选 删除,并与 PageQueryTable 的 v-model:page / pageSize 对齐(内部仍用 pageable.pageNum / pageSize)。
入参要点(UseListFetchOptions)
| 选项 | 说明 |
|---|---|
list | (params: Record<string, unknown>) => Promise<unknown>,必传 |
remove | 可选,单条删除 |
defaultSearch | 返回初始筛选对象;reset / resetSearch 会恢复为它的深拷贝 |
isPageable | 默认 true:请求里带 pageNum、pageSize |
clientPagination | 与 isPageable: false 配合:全量拉取后在前端筛选 + 分页 |
clientFilter | clientPagination 时对每行是否保留 |
parseListResponse | 解析接口返回为 { rows, pageNum, pageSize, total };默认支持常见字段名 |
dataCallBack | 对原始响应再加工 |
requestError | 错误回调 |
refreshAfterRemove | 删除成功后是否重新拉列表,默认 true |
默认 parseListResponse 支持:records / list / rows、total / totalElements / count、current / pageNum、size / pageSize 等。
两种分页模式
服务端分页(默认)
isPageable: true(默认)。buildListParams() 会合并 searchParam 与 pageNum、pageSize;getTableList 后更新 pageable 与 tableData。
表格绑定::table-data="tableData" 或业务需要时用返回的数据;item-count 用 pageable.total。
前端筛选 + 前端分页
isPageable: false 且 clientPagination: true,并传入 clientFilter。
tableData:接口返回的全量行(或一次拉取后的全集)。displayRows:当前页应显示的行(内部对filteredRows切片)。itemCount:使用pageable.total(由filteredRows长度 watch 维护)。
典型场景见站点管理等页:接口返回数组,筛选在浏览器完成。
返回值(常用)
| 名称 | 说明 |
|---|---|
tableData | shallowRef 行数组 |
displayRows | 计算属性:服务端模式等于 tableData;客户端分页为当前页切片 |
getLoading / deleteLoading | 请求状态 |
pageable | { pageNum, pageSize, total } |
page / pageSize | 与 PageQueryTable 的 v-model 可直接绑定的计算属性 |
searchParam / searchInitParam | 当前筛选与初始筛选 |
getTableList | 拉列表 |
search | 查询(页码置 1 再请求) |
reset | 恢复初始筛选并请求 |
resetSearch | 仅恢复筛选与页码,不自动请求 |
removeRow | 调用 remove |
handleSizeChange / handleCurrentChange | 与分页控件配合(服务端模式下会触发重新请求) |
与 PageQueryTable 配合
vue
<PageQueryTable
v-model:query="searchParam"
v-model:page="page"
v-model:page-size="pageSize"
:table-data="displayRows"
:loading="getLoading"
:item-count="pageable.total"
@search="search"
@reset="reset"
/>reset 在 useListFetch 内会恢复默认筛选并 getTableList();若只需清空表单而不立刻请求,可使用 resetSearch 并自行调用 getTableList。