el-pagination入门学习

自律最差的编程狗

已于 2022-06-16 16:07:56 修改

阅读量1.6k

点赞数

分类专栏： element-ui 文章标签：学习 elementui

于 2022-06-16 15:56:08 首次发布

本文链接：https://blog.csdn.net/qq_40765784/article/details/125317338

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

el-pagination入门学习

知识点

layout属性是顺序显示的，效果图自左向右分别对应total,sizes,prev,pager,next,jumper
total指定总记录数
page-size指定页面大小
current-page指定当前页
pager-count指定pager的显示数目，首尾页包括在内；要求是大于等于 5 且小于等于 21 的数，小于 5 或大于21时console报错
page-sizes指定可选的页面大小
@size-change为页面大小改变时钩子，携带参数pageSize
@current-change为页码改变钩子，携带参数current
small小分页显示
background背景加深显示
hide-on-single-page为true，仅有一个页面时，隐藏分页部分

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id='app'>
        <el-switch v-model='flag'></el-switch>
        <el-pagination 
        :hide-on-single-page='flag' 
        small 
        background 
        layout='total,sizes,prev,pager,next,jumper'
        :total='total' 
        :page-size='pageSize' 
        :current-page='current' 
        :page-sizes="[10,50,100,200,400]"
        :pager-count='pagerCount' 
        @size-change='handleSizeChange' 
        @current-change='handleCurrentChange'>
        </el-pagination>
    </div>
</body>

</html>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                pageSize: 10,
                current: 1,
                total: 100,
                pagerCount: 5,
                flag: false
            }
        },
        methods: {
            //页面大小改变钩子
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.current = 1
            },
            //页码改变钩子
            handleCurrentChange(current) {
                this.current = current;
            }
        }
    })
</script>