如何使用element-ui完成分页

本文介绍如何在Vue项目中利用Element-UI组件库实现分页功能。通过获取总页数并赋值,定义当前页码、总页码和每页显示条数,结合pagination模板和事件处理方法,完成分页操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 首先在获取所有数据的时候,获取到总页数,并且赋值,便于后面调用
 // 获取商品数据
    async getGoodList () {
      const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        console.log(res.meta.status)
        return this.$message.error('获取商品数据列表失败')
      } else {
        this.goodslist = res.data.goods
        // 获取页面的总页数
        this.total = res.data.total
      }
    },
  1. 在data中定义当前页码,总页码,当页显示的条数
  data () {
    return {
      // 获取商品列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示的数据
        pagesize: 2
      },
      // 当前总页数
      total: 0,
      goodslist: []
    }
  },
  1. 赋值element-ui官网的pagination模板,并且定义其中所有的值
<!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

4.最后将两个事件在methods中定义

 // 监听pagesize改变事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getGoodList()
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值