useTable

表格通用 Hook，支持分页、搜索、全选、跨页勾选等功能。

基础用法

结合a-table

姓名	年龄	创建时间
暂无数据

复制代码

查看代码

<template>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    />
</template>
<script setup lang="ts">
import { useTable } from "speed-components-ui/hooks";
import { computed, ref } from "vue";

// 模拟请求数据
const fetchData = async (params: any) => {
  console.log('请求参数:', params);
  // 模拟接口请求延迟
  await new Promise(resolve => setTimeout(resolve, 500));
  
  // 模拟分页数据
  const { page = 1, size = 10 } = params;
  const total = 100; // 总数据量
  const start = (page - 1) * size;
  const end = Math.min(start + size, total);
  
  const mockData = Array.from({ length: end - start }, (_, index) => ({
    id: start + index + 1,
    name: `用户${start + index + 1}`,
    age: Math.floor(Math.random() * 50) + 18,
    createTime: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000)
  }));

  return {
    success: true,
    data: mockData,
    totalCount: total,
  };
};

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  }
];

const options = computed(() => ({
  beforeFetch: () => {
    console.log("请求前处理");
  },
}));

const { dataSource, loading, pagination, handleTableChange, getList } = useTable(
  fetchData,
  options
);

// 初始化加载数据
getList();
</script>

复合示例

一个包含，翻页，全选，排序，勾选，筛选的综合示例(结合QueryFilter)

姓名

状态

请选择状态

全选

	姓名	年龄	状态	创建时间
暂无数据

复制代码

查看代码

<template>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    />
</template>
<script setup lang="ts">
import { useTable } from "@/hooks/useLoad";
import { computed, ref } from "vue";

// 模拟请求数据
const fetchData = async (params: any) => {
  console.log('请求参数:', params);
  // 模拟接口请求延迟
  await new Promise(resolve => setTimeout(resolve, 500));
  
  // 模拟分页数据
  const { page = 1, size = 10 } = params;
  const total = 100; // 总数据量
  const start = (page - 1) * size;
  const end = Math.min(start + size, total);
  
  const mockData = Array.from({ length: end - start }, (_, index) => ({
    id: start + index + 1,
    name: `用户${start + index + 1}`,
    age: Math.floor(Math.random() * 50) + 18,
  }));

  return {
    success: true,
    data: mockData,
    totalCount: total,
  };
};


const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
];

const options = computed(() => ({
  beforeFetch: () => {
    console.log("请求前处理");
  },
}));

const { dataSource, loading, pagination, handleTableChange, getList } =
  useTable(fetchData, options);

// 初始化加载数据
getList();
</script>

API

参数

参数	说明	类型	默认值
ajaxFn	请求数据的函数	Function	-
extraOptions	额外配置选项	Ref<OptionsType> | ComputedRef<OptionsType>	-

extraOptions 配置项

参数	说明	类型	默认值
extraParams	额外请求参数(不包含page,size)	Record<string, any>	{}
rowKey	行数据的 Key	string	'id'
beforeFetch	请求前回调函数	() => void	-
transformAfterFetch	请求后处理函数（可用于转换data数据结构）	(data: any ) => any	-
afterFetch	请求后回调函数	(res: any) => void	-
handleMultiRes	处理多选结果(可用于过滤一些可勾选的rowKey)	(res: any) => string[]	-
fullRowsAjax	获取全量数据的请求函数	Function	-
emit	事件发射器(可用于封装对外更新的hasSelectedRows),内部会触发emit("update:hasSelectedRows", state.hasSelectedRows);	Function	-
needFullSelect	是否需要全选功能(配套fullRowsAjax传入)	boolean	false
sortFieldKey	排序字段key	string	sortField
sortOrderKey	排序方式key	string	sortOrder
hasPagination	是否启用分页（false下会隐藏分页，且去掉page,size参数）	boolean	true
hasSelectedRows	已选择的行数据（这里是全量数据集，包含跨页选择）	any[]	[]

返回值

参数	说明	类型
state	表格状态对象	Object
state.curPageKeys	当前页的 key 列表	string[]
state.selectedRowKeys	已选中的 key 列表	string[]
state.selectedRows	已选中的行数据	Record<string, any>[]
state.totalRows	全量数据	any[]
state.hasSelectedRows	已选择的行数据	any[]
totalCheckStatus	全选状态	Object
totalCheckStatus.checkAll	是否全选	boolean
totalCheckStatus.indeterminate	是否半选	boolean
loading	加载状态	Ref<boolean>
selectAllLoading	全选加载状态	Ref<boolean>
pagination	分页配置	Ref<Object>
dataSource	表格数据源	Ref<any[]>
getList	获取列表数据	(isSearch: boolean, listOptions: ListOption) => void
onSelectChange	选择变化处理函数	Function
handleTableChange	表格变化处理函数(用于处理分页，表头筛选，排序)	Function
handleResizeColumn	处理列宽变化	Function
onCheckAllChange	全选变化处理函数	Function

getList 参数说明

参数	说明	类型	默认值
isSearch	是否为筛选请求（内部会重置页码为1）	boolean	true
ListOption	needResetChecked(是否重置勾选，会清除所有已有勾选态)，backLoad（递归调用时使用，无需传入）	{ needResetChecked:boolean; backLoad?:boolean }	{ needResetChecked:false, backLoad:false }

注意事项

1. 内部会做倒页处理，如：第三页删除到最后一条，会向前一页请求数据。