vue+Element-ui实现分页效果

最新推荐文章于 2023-12-21 22:31:07 发布

原创最新推荐文章于 2023-12-21 22:31:07 发布 · 698 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #分页组件 #el-pagination #Element-ui

Vue 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何在管理系统页面中使用Element-ui的分页组件来实现数据的有效展示。通过具体的HTML引用代码及JavaScript实例，展示了如何设置初始页、每页显示的数据数量等参数，并提供了分页事件响应的方法。

在做管理系统页面时，有时候展示数据，需要分页展示，这就可以使用Element-ui框架。

HTML中的引用代码:

        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]" 
                    :page-size="pagesize"   
                    :background='true' 
                    :pager-count="pagerCount"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="warnlist.length" class="pageControl">   
            </el-pagination>

JavaScript中的代码:

  data:function(){
        return{
            currentPage:1,//初始页
            pagesize:5,//每一页的数量,
            pagerCount:5,//展示到多少页时 中间显示...，取值在5~21之间
            warnlist:[],    
methods:{
        handleSizeChange:function(size){
            //选择 一页展示多少数据时 调用的方法
            this.pagesize = size;
            console.log(size+"****");
        },
        handleCurrentChange:function(currentPage){
            //点击页面项 的函数响应
            this.currentPage = currentPage;
        }
    }

el-pagination的相关属性: