Skip to content

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 配合:全量拉取后在前端筛选 + 分页
clientFilterclientPagination 时对每行是否保留
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 维护)。

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

返回值(常用) ​

名称说明
tableDatashallowRef 行数组
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。

TaskFlow 内部文档 Released under the MIT License.