技术文档

打开导航菜单

PIG AI Guide

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/HYKVsnrmfPfixKqkTmAG9VrkVFraIps5tqkbEE8n.jpg) ](https://wwads.cn/click/bundle?code=9jV4U87gm2l5qP0HxzCu8wLpUQUQrP)

注册亚马逊云服务免费套餐🆓可享高达200美元抵扣金🚀包括免费使用精选服务🎉广告

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 如何构建

13.md 4.4 KB Постоянная ссылка История Исходник