温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-12-09 14:31:24 来源:亿速云 阅读:314 作者:iii 栏目:开发技术

这篇文章主要介绍“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()
      },
    },

1.3 参数说明

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

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

1.4 效果演示

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

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

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

到此,关于“Vue后台管理系统怎么实现分页功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI