@corgicoding-el/data-pagination

为 @corgicoding/web-quick-start 工程模板设定的分页组件，基于 el-pagination 封装

绑定依赖

无

如何使用

安装工程到本地，并按需使用或全局使用

前置依赖

• element-plus
• vue (3.x)

如果没有以上依赖，工程执行以下命令进行安装

pnpm install element-plus vue -S

如果使用 web-quick-start 模板则无需任何操作，上述依赖已经在模板安装

安装

使用 pnpm 下载

pnpm install @corgicoding-el/data-pagination -S

使用

props入参

export interface DataPaginaitonProps {
  currentPage?: number; // 当前页
  pageSize?: number; // 每页占据数量
  small?: boolean; // 是否为 small 样式
  disabled?: boolean; // 是否禁用
  background?: boolean; // 是否有深色背景
  total?: number; // 总计数目
  componentOptions?: any; // el-pagination 原生参数
  eventOptions?: any; // el-pagination 原生事件
}

emits 事件

// 触发方法返给上一级
const Emits = defineEmits([
  'size-change', // 页码数变化
  'current-change', // 当前页变化
  'update:current-page',
  'update:pageSize'
]);

暴露参数

defineExpose({
  elRef
});

按需使用

较为完整的案例如下

<script setup lang="ts">
import DataPagination from '@corgicoding-el/data-pagination';

const pageSetting = reactive({
  current: 1,
  size: 10,
  total: 100
});

const changeCurrentPage = (val: number) => {};
const changePageSize = (val: number) => {};
</script>

<template>
  <DataPagination
    v-model:current-page="pageSetting.current"
    v-model:page-size="pageSetting.size"
    :total="pageSetting.total"
    class="data-grid__pagination-footer"
    @current-change="changeCurrentPage"
    @size-change="changePageSize"
  ></DataPagination>
</template>

全局引入

在 main.ts 引入

import DataPagination from '@corgicoding-el/data-pagination';

app.use(DataPagination);

原生 element-plus 使用

文档： https://element-plus.org/zh-CN/component/pagination.html#api

• 所有 element-plus 的 pagination 参数属性直接直接绑定在组件元素上
• 所有 element-plus 的 pagination 事件可以通用 eventOptions 进行绑定

<DataPagination
  v-model:current-page="pageSetting.current"
  v-model:page-size="pageSetting.size"
  :total="pageSetting.total"
  class="data-grid__pagination-footer"
  @current-change="changeCurrentPage"
  @size-change="changePageSize"
  :component-options="{
    prevIcon: 'Search'
  }"
  :event-options="{
    'next-click': () => {}
  }"
></DataPagination>