技术文档 打开导航菜单 PIG AI Guide ============ 切换主题搜索 [](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/HYKVsnrmfPfixKqkTmAG9VrkVFraIps5tqkbEE8n.jpg) ](https://wwads.cn/click/bundle?code=9jV4U87gm2l5qP0HxzCu8wLpUQUQrP) [注册亚马逊云服务免费套餐🆓可享高达200美元抵扣金🚀包括免费使用精选服务🎉](https://wwads.cn/click/bundle?code=9jV4U87gm2l5qP0HxzCu8wLpUQUQrP)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟") PIGX 技术指南 ========= 适配 5.0 以上单体和微服务版本 PIGX 技术指南PIG ⌘K 参与开发 快速上手 前端部分 功能使用 后端部分 扩展必看 生产部署 社区分享 更新日志 更新日期: 2025-10-23 最后更新: 2025/8/19 切换主题 前端表格组件 ====== [](#1-usetable-函数是什么)1\. useTable 函数是什么 --------------------------------------- 官方对自定义 hook 定义：在 Vue 应用的概念中，“组合式函数” (Composables) 是一个利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。Hooks 在前端领域并没有明确定义，借用知乎大佬的定义：在 JS 里是 callback,事件驱动，集成定义一些可复用的方法。 **useTable 函数的名称就能清晰地表达其作用，它是集成了前端 element-plus 表格的一些通用函数。** | 方法名 | 描述 | | --- | --- | | `tableStyle` | 返回包含表格样式的对象，其中包含 `cellStyle` 和 `headerCellStyle` 两个属性，分别用于设置表格单元格和表头单元格的样式 | | `getDataList(refresh?: any)` | 获取数据列表，并可选择是否刷新当前页码。如果需要刷新，则将 `state.pagination.current` 重置为 1 | | `sizeChangeHandle(val: number)` | 分页大小改变时触发的事件处理函数。会修改 `state.pagination` 中的 `size` 属性，并再次调用 `query()` 方法进行查询 | | `currentChangeHandle(val: number)` | 当前页码改变时触发的事件处理函数。会修改 `state.pagination` 中的 `current` 属性，并再次调用 `query()` 方法进行查询 | | `sortChangeHandle(column: any)` | 排序方式改变时触发的事件处理函数。根据 `column` 的内容，修改 `state.descs` 和 `state.ascs` 中的排序字段，并再次调用 `query()` 方法进行查询 | | `downBlobFile(url: string, query: any, fileName: string)` | 用于下载文件的方法。接收三个参数：文件下载地址 `url`、请求参数 `query` 和文件名 `fileName`。调用了 `other.downBlobFile()` 方法来执行文件下载。返回一个 Promise 对象，用于异步处理结果 | [](#2-页面中如何使用)2\. 页面中如何使用 ------------------------- ``` `// 使用 useTable 自动生成表格一些通用方法 const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle, } = useTable(state);` ``` [](#3-usetable-初始化-state-如何构建)3\. useTable 初始化 state 如何构建 --------------------------------------------------------- 如果你想通过 useTable 生成一些通用的表格方法，那么就需要向它提供一些初始值，比如查询的URL和分页大小等参数。 ``` `const state: BasicTableProps = reactive({ queryForm: { }, pageList: pageList, });` ``` * 完整的 BasicTable 定义属性如下 ``` `export interface BasicTableProps { // 是否在创建页面时即调用数据列表接口，默认为true createdIsNeed?: boolean; // 是否需要分页，默认为true isPage?: boolean; // 查询条件表单对象，类型为any queryForm?: any; // 数据列表数组 dataList?: any[]; // 分页属性对象 pagination?: Pagination; // 数据列表，loading状态标志，默认为false dataListLoading?: boolean; // 数据列表多选项数组 dataListSelections?: any[]; // 数据列表查询接口api方法，接收任意数量参数，返回Promise pageList?: (...arg: any) => Promise; // loading标志，默认为false loading?: Boolean; // 多选结果数组 selectObjs?: any[]; // 排序字段数组 descs?: string[]; // 排序方式数组 ascs?: string[]; // props属性对象，类型为any props?: any; }` ``` ### 本页导航 1\. useTable 函数是什么 2\. 页面中如何使用 3\. useTable 初始化 state 如何构建