如何使用element-ui完成分页

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

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

首先在获取所有数据的时候，获取到总页数，并且赋值，便于后面调用

 // 获取商品数据
    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
      }
    },

在data中定义当前页码，总页码，当页显示的条数

  data () {
    return {
      // 获取商品列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示的数据
        pagesize: 2
      },
      // 当前总页数
      total: 0,
      goodslist: []
    }
  },

赋值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()
    }