对el-pagination (opens new window)的二次封装，分页器右对齐，支持 el-pagination 的所有功能，默认配置如下：

• background：true
• layout：'slot,total,sizes,prev,pager,next,jumper'
• 插槽：默认添加【刷新当前页】按钮，可以由hidden-reload属性配置是否隐藏

基本使用

共 100 条

• 4条/页
• 10条/页
• 20条/页
• 50条/页
• 100条/页
• 200条/页

无数据

• 1
• 2
• 3
• 4
• 5
• 6
• 10

前往

页

<template>
    <yb-pagination
        :pageSize="10"
        :currentPage="2"
        :total="100"
        :page-sizes="[4, 10, 20, 50, 100, 200]"
        @reload="handleReload"
    />
</template>
<script>
    export default {
        methods: {
            handleReload() {
                console.log('handleReload');
            },
        },
    };
</script>

显示 复制 复制

插槽使用

hidden-reload

共 100 条

• 4条/页
• 10条/页
• 20条/页
• 50条/页
• 100条/页
• 200条/页

无数据

• 1
• 2
• 3
• 4
• 5
• 6
• 10

前往

页

<template>
    <div :style="{marginBottom: '10px'}">
        hidden-reload <el-switch v-model="hiddenReload" />
    </div>
    <yb-pagination
        :pageSize="10"
        :currentPage="1"
        :total="100"
        :page-sizes="[4, 10, 20, 50, 100, 200]"
        :hidden-reload="hiddenReload"
        @reload="handleReload"
    >
        <template v-slot> <el-button>刷新</el-button> </template>
    </yb-pagination>
</template>
<script>
    export default {
        data() {
            return {
                hiddenReload: true,
            };
        },
        methods: {
            handleReload() {
                console.log('handleReload');
            },
        },
    };
</script>

显示 复制 复制

YbPagination Attributes

参数	说明	类型	可选值	默认值
paginationStyle	分页器 style	object	--	-
paginationClassName	分页器 className	string	--	-
hidden-reload	是否隐藏刷新按钮	boolean	--	--
-	同el-pagination (opens new window)	object	--	--

YbPagination Events

事件名称	说明	回调参数
reload	点击刷新当前页时会触发	--
-	其他事件同el-pagination (opens new window)	--

YbPagination Scoped Slot

name	说明
default	自定义默认内容。
afterReload	在刷新按钮后边。