Skip to content

useListFetch

路径:frontend/src/composables/list/useListFetch.ts

为列表页提供 list 请求分页状态、可选 删除,并与 PageQueryTablev-model:page / pageSize 对齐(内部仍用 pageable.pageNum / pageSize)。

入参要点(UseListFetchOptions)

选项说明
list(params: Record<string, unknown>) => Promise<unknown>,必传
remove可选,单条删除
defaultSearch返回初始筛选对象;reset / resetSearch 会恢复为它的深拷贝
isPageable默认 true:请求里带 pageNumpageSize
clientPaginationisPageable: false 配合:全量拉取后在前端筛选 + 分页
clientFilterclientPagination 时对每行是否保留
parseListResponse解析接口返回为 { rows, pageNum, pageSize, total };默认支持常见字段名
dataCallBack对原始响应再加工
requestError错误回调
refreshAfterRemove删除成功后是否重新拉列表,默认 true

默认 parseListResponse 支持:records / list / rowstotal / totalElements / countcurrent / pageNumsize / pageSize 等。

两种分页模式

服务端分页(默认)

isPageable: true(默认)。buildListParams() 会合并 searchParampageNumpageSizegetTableList 后更新 pageabletableData

表格绑定::table-data="tableData" 或业务需要时用返回的数据;item-countpageable.total

前端筛选 + 前端分页

isPageable: falseclientPagination: true,并传入 clientFilter

  • tableData:接口返回的全量行(或一次拉取后的全集)。
  • displayRows:当前页应显示的行(内部对 filteredRows 切片)。
  • itemCount:使用 pageable.total(由 filteredRows 长度 watch 维护)。

典型场景见站点管理等页:接口返回数组,筛选在浏览器完成。

返回值(常用)

名称说明
tableDatashallowRef 行数组
displayRows计算属性:服务端模式等于 tableData;客户端分页为当前页切片
getLoading / deleteLoading请求状态
pageable{ pageNum, pageSize, total }
page / pageSizePageQueryTablev-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"
/>

resetuseListFetch 内会恢复默认筛选并 getTableList();若只需清空表单而不立刻请求,可使用 resetSearch 并自行调用 getTableList

TaskFlow 内部文档 Released under the MIT License.