<template>
<div class="index">
<el-pagination
background
:hide-on-single-page="true"
layout="total, prev, pager, next"
:current-page="currentPage"
:page-size="pageSize"
@current-change="handleCurrentChange"
:total="total">
</el-pagination>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
total: 126,
currentPage: 1,
pageSize: 3 // 每页显示的数量
}
},
created: {
},
methods: {
handleCurrentChange (currentPage) {
// 显示当前页数对应的数据
console.log('currentPage = ' + currentPage)
}
}
}
</script> <style> </style>

  

vue.js 分页的更多相关文章

  1. vue.js 分页加载,向上滑动,依次加载数据。

    export default { layout: 'default', data(){ return{ page:1, pageSize:10, orderListArr:[], prodListLo ...

  2. html+vue.js 实现分页可兼容IE

    当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...

  3. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  4. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  5. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  7. 用vue.js的v-for,v-if,computed写一个分页样式

    在学Vue,总想写个分页,先写了一个样式. 主要看思路: 思路简单,得到总页数,判断总页数,循环. 先判断总页数是否需要分页,总页数==1页就不分了. 再判断总页数<11就不用--. 总页数&g ...

  8. Vue.js 开发实践:实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  9. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. TortoiseGit操作之提交代码到远程库

    1.在本地代码库的文件夹中,"右键" 2.GIT提交要求必须填写Commit message,请认真填写描述信息. 建议填写的变更项编号,如上图. 代码提交到本地的配置库中,然后p ...

  2. flask 根路由在蓝图中

  3. 使用kindeditor直接粘贴本地图片或者是qq截图

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  4. 云平台(cloud platforms)

    云平台:允许开发者们或是将写好的程序放在“云”里运行,或是使用“云”里提供的服务,或二者皆是的服务 转向云计算(cloud computing),是业界将要面临的一个重大改变.各种云平台(cloud ...

  5. LUOGU P3380 【模板】二逼平衡树(树套树)

    传送门 解题思路 这里写的是常数巨大的线段树套\(splay\),卡了半天常才过.首先线段树每个节点挂一个\(splay\),\(splay\)中的元素即为线段树管辖的区间中的数.对于操作\(1\), ...

  6. [CSP-S模拟测试]:序列(主席树)

    题目描述 小$A$把自己之前得到的序列展示给了小$B$,不过这一次,他并不要求小$B$模仿他之前的行为.他给了小$B$一些询问,每个询问都是$l\ r\ x$的形式,要求小$B$数出在序列的第$l$个 ...

  7. springBootJpa 联表分页查询总数不准的问题

    问题情景: 在联表查询时 ``` // 两张表关联查询 Join<Project, Plan> planJoin = root.join("plans", JoinTy ...

  8. win10右键在此处打开CMD

    1.在网上找了好多发现都不能运行,最后找到一个靠谱的记下来,方便以后使用. 2.新建一个 .reg格式的脚本 Windows Registry Editor Version 5.00 [HKEY_CL ...

  9. day106 支付功能与优惠券功能 contentype

    https://blog.csdn.net/Ayhan_huang/article/details/78626957 一.ContenType from django.db import models ...

  10. Java集合的介绍

    参考博客: https://blog.csdn.net/zhangqunshuai/article/details/80660974 List , Set, Map都是接口,前两个继承至Collect ...