useTablePage

useTablePage 是列表页 Hook，统一管理表格组件与搜索组件的引用，并提供刷新表格数据的快捷方法。

引入

import useTablePage from '@sud-web/vue-hooks/useTablePage'

@sud-web/vue-hooks 通过子路径导出 Hook，需使用 /useTablePage 引入。

基础用法

tableRef / searchRef 分别绑定到表格与搜索组件，requestTable 调用表格实例的 requestData 刷新数据。下方示例配合 PcSearch 与 PcTable 使用 mock 接口。

loading

PcSearch 触发的是 request 事件（点击搜索/重置），因此监听 @request 而非 @search。

API

返回值

字段	类型	初始值	说明
tableRef	Ref<PcTableInstance | null>	null	表格组件引用
searchRef	Ref<PcSearchInstance | null>	null	搜索组件引用
requestTable	(type?: "reset" | "default") => void	—	调用表格的 requestData 刷新数据

类型 PcTableInstance / PcSearchInstance 直接从 @sud-web/vue-ui 导入，无需手动传入。

requestTable 行为

入参	说明
requestTable()	默认以 reset 调用，回到第一页重新请求
requestTable('reset')	重置分页后请求
requestTable('default')	保持当前分页请求

当 tableRef 尚未挂载（为 null）时，requestTable 会安全跳过，不会抛错。

类型声明

import type { PcTableInstance, PcSearchInstance } from '@sud-web/vue-ui'

function useTablePage(): {
  tableRef: Ref<PcTableInstance | null>
  searchRef: Ref<PcSearchInstance | null>
  requestTable: (type?: "reset" | "default") => void
}

测试

cd packages/vue/hooks
pnpm test