Vue后台管理系统之实现分页功能

很多小伙伴在反馈用vue在做后台管理系统的时候,不知道如何实现分页功能,本文主要介绍了Vue后台管理系统之实现分页功能,分享给大家,具体如下:

效果图:

image.png

功能描述:

  • 显示数据的总数目

  • 可选择每天的显示条数

  • 点击页码跳转到指定页数

  • 输入页码可跳转到指定页

1.功能实现

1.1 结构

1
2
3
4
5
6
7
8
9
10
11
<!-- 分页 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryInfo.pagenum"
  :page-sizes="[2, 5, 10, 15]"
  :page-size="queryInfo.pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
>
</el-pagination>

1.2 逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  data() {
    return {
      //请求参数
      queryInfo: {
        type: 3,
        //当前页数
        pagenum: 1,
        //指定当前页数显示的数目
        pagesize: 5,
      },
      goodsList: [],
      //总数据
      total: 0,
    }
  }
 
methods: {
    //获取商品分类数据
    async getGoodsCate() {
      const { data: res } = await this.$http.get("categories", {
        params: this.queryInfo,
      })
      if (res.meta.status !== 200) {
        this.$message.error("获取参数失败")
      }
      this.total = res.data.total
      this.goodsList = res.data.result
      //console.log(this.goodsList)
    },
    //监听每页的条数
    handleSizeChange(pagesize) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = pagesize
      this.getGoodsCate()
    },
    //监听当前页数
    handleCurrentChange(pageNum) {
      this.queryInfo.pagenum = pageNum
      this.getGoodsCate()
    },
  },

1.3 参数说明

image.png

1.4 效果演示

image.png

image.png

image.png



郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: