element分页组件的使用

随着数据量增长,分页成为必要。本文分享作者小欢关于如何使用Element UI实现简单分页的思路和代码,鼓励读者根据需求进行个性化调整,并提供了官方API链接以供深入学习。
摘要由CSDN通过智能技术生成

数据越来越多,需要我们来进行分页的功能,所以今天小欢呢来为大家说一下简单分页的实现,代码和思路呢纯属是个人的想法,大家有什么更好的也可以对我提出来,我会吸取学习的。

<el-pagination
        background
        layout="prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currpage"
        :page-size="pageSize"
        :total="total"
      ></el-pagination>

里面具体的一些属性,大家可以查看官网的api介绍
官网地址
https://element.eleme.io/#/zh-CN/component/pagination

data数据(一般我们需要动态从接口获取后台数据)

data() {
    return {
      tableData: [],
      pageSize: 10, //每一页的数据
      currpage: 1, //当前页
      total: 0, //所有的数据
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值