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

发布时间：2021-12-09 14:31:24 阅读：315 作者：iii 栏目：开发技术

Vue开发者专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要介绍“Vue后台管理系统怎么实现分页功能”，在日常操作中，相信很多人在Vue后台管理系统怎么实现分页功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue后台管理系统怎么实现分页功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

具体如下：

效果图：

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

功能描述：

显示数据的总数目
可选择每天的显示条数
点击页码跳转到指定页数
输入页码可跳转到指定页

1.功能实现

1.1 结构

<!-- 分页 -->
        <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 逻辑

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()
      },
    },