el-ui 分页

最新推荐文章于 2022-08-26 20:07:19 发布

Web Erek

最新推荐文章于 2022-08-26 20:07:19 发布

阅读量966

点赞数

分类专栏： Element && Elemen Plus 文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/weixin_45536484/article/details/122719855

版权

Element && Elemen Plus 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="cur_page" :page-sizes="[10, 20, 30]" :page-size="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" :hide-on-single-page="true"></el-pagination>

data

cur_page: 1,     // 当前页
pageNum: 10,     // 每页条数
totalCount: 1,     // 总条数 (获取数据之后需要赋值)

methods

handleSizeChange(val) {    // 每页条数变化
    this.pageNum = val;
    // 重新获取数据
    },
handleCurrentChange(val) {      //页码变化
    this.cur_page = val;
    // 重新获取数据
},