技术文档

打开导航菜单

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<BasicTableProps>({   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<any>;    // loading标志，默认为false   loading?:  Boolean;    // 多选结果数组   selectObjs?:  any[];    // 排序字段数组   descs?:  string[];    // 排序方式数组   ascs?:  string[];    // props属性对象，类型为any   props?:  any;  }`




```

### 本页导航

1\. useTable 函数是什么

2\. 页面中如何使用

3\. useTable 初始化 state 如何构建