📄 前端表格组件

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. 页面中如何使用

// 使用 useTable 自动生成表格一些通用方法
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  downBlobFile,
  tableStyle,
} = 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;
}