typescript
function useTablePagination<T>(api: ApiParam<T>, options: TableOptions<T>): TablePaginationResult;

typescript
interface TableOptions<T> {
  formatData?: (data: T[]) => any;
  immediate?: boolean;
  queryParams: ComputedRef<QueryParams> | QueryParams;
}

typescript
{
  getTableData: () => Promise<void>; // 获取表格数据
  pageRef: Ref<number>; // 当前页码
  pageSizeRef: Ref<number>; // 每页条数
  tableData: Ref<T[]>; // 表格数据
  totalRef: Ref<number>; // 总条数
  loadingRef: Ref<boolean>; // 加载状态
}

vue
<template>
  <TableLayout :fetch-api="fetchList" :params="queryParams" :format-data="formatTableData">
    <!-- 查询区域 -->
    <template #query>
      <el-form :model="queryParams">
        <!-- 查询表单内容 -->
      </el-form>
    </template>
 
    <!-- 操作区域 -->
    <template #operation>
      <el-button type="primary">新增</el-button>
    </template>
 
    <!-- 表格内容 -->
    <template #table>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="status" label="状态" />
    </template>
  </TableLayout>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
 
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
  // 其他查询参数
});
 
const fetchList = async (params) => {
  // 实现数据获取逻辑
  return {
    rows: [],
    total: 0
  };
};
 
const formatTableData = (data) => {
  // 数据格式化逻辑
  return data;
};
</script>

typescript
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  status: null
});

typescript
import { request } from '@/utils/request';
 
export function getList(params: QueryParams) {
  return request({
    url: '/api/list',
    method: 'get',
    params
  });
}

typescript
const formatTableData = (data: any[]) => {
  return data.map((item) => ({
    ...item,
    statusText: item.status === 1 ? '启用' : '禁用'
  }));
};

vue
<TableLayout :default-sort="{ prop: 'date', order: 'descending' }">
  <template #table>
    <el-table-column prop="date" label="日期" sortable />
  </template>
</TableLayout>

typescript
interface PageApiResult<T> {
  rows: T[];
  total: number;
}

typescript
interface QueryParams {
  pageNum: number;
  pageSize: number;
  orderByColumn?: string;
  isAsc?: string;
  [key: string]: any;
}

typescript
interface Sort {
  prop: string;
  order: 'ascending' | 'descending';
}