@corgicoding-el/data-pagination
v2.0.9
Published
基于element-plus的分页组件
Downloads
24
Maintainers
Readme
@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>