Data Pagination 数据分页

该组件用于快速实现数据分页功能，内部封装了统一样式、分页信息、页码页数切换等逻辑。

全局配置

在全局配置组件属性。

DataPagination组件属性配置

app.provide(DATA_PAGINATION_KEY, {
  currentKey: 'current',
  sizeKey: 'size',
  // others props...
});

基础用法

设置默认值

通过v-model可以设置默认选中的页码和页数。

属性&事件透传

Data Pagination基于ElPagination封装，所以你可以传入ElPagination的所有属性和事件。

属性

属性名	说明	类型	默认值
model-value / v-model	分页参数绑定值	T	—
total	数据总数	number	—
current-key	当前页字段名	string	current
size-key	每页个数字段名	string	size

类型声明

import type { PaginationProps as ElPaginationProps } from 'element-plus';

/**
 * 数据分页组件属性
 * @template T 分页类型
 */
export interface DataPaginationProps<T> {
  /**
   * 数据总数
   */
  total?: number;
  /**
   * 当前页字段名
   * @defaultValue 'current'
   */
  currentKey?: keyof T;
  /**
   * 每页个数字段名
   * @defaultValue 'size'
   */
  sizeKey?: keyof T;
}

/**
 * 数据分页组件包含透传属性在内的全部属性
 * @template T 分页类型
 */
export type DataPaginationFullProps<T> = Partial<ElPaginationProps & DataPaginationProps<T>>;