vue+Element-ui实现分页效果

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

ioszhanghui

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

阅读量673

点赞数 1

分类专栏： Vue 文章标签： Vue 分页组件 el-pagination Element-ui

本文链接：https://blog.csdn.net/ioszhanghui/article/details/97022785

版权

Vue 专栏收录该内容

37 篇文章

订阅专栏

在做管理系统页面时，有时候展示数据，需要分页展示，这就可以使用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的相关属性: