前端表格组件

useTable 函数是什么

官方对自定义 hook 定义：在 Vue 应用的概念中，"组合式函数" (Composables) 是一个利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。Hooks 在前端领域并没有明确定义，借用知乎大佬的定义：在 JS 里是 callback，事件驱动，集成定义一些可复用的方法。

核心概念

useTable 函数集成了前端 element-plus 表格的一些通用函数，通过组合式 API 封装和复用表格相关的有状态逻辑。

方法说明

方法名	描述
`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 对象，用于异步处理结果

页面中如何使用

// 使用 useTable 自动生成表格一些通用方法
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  downBlobFile,
  tableStyle,
} = useTable(state);

使用说明

通过解构 useTable 返回的方法，可以快速获取表格的常用功能，如数据加载、分页处理、排序和文件下载等。

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;
}

配置要点

必须提供 pageList 方法作为数据查询接口，该方法应返回 Promise 对象。如果需要在页面创建时自动加载数据，确保 createdIsNeed 设置为 true（默认值）。

本页目录

#前端表格组件

#useTable 函数是什么

#方法说明

#页面中如何使用