Vue开发之封装分页组件与使用示例


Posted in Javascript onApril 25, 2019

本文实例讲述了Vue开发之封装分页组件与使用。分享给大家供大家参考,具体如下:

使用elementui中的el-pagination来封装分页组件

pagination.vue:

<template>
  <div class="pagination">
    <el-pagination small class="text-center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.page" :page-sizes="pageSizes" :page-size="page.limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    total: {
      type: Number
    } // 总条数
  },
  data() {
    return {
      pageSizes: [10, 20, 50, 100],
      page: {
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    // 每页条数变更
    handleSizeChange(val) {
      this.page.limit = val;
      this.$emit('pageChange', this.page);
    },
    // 当前页码变更
    handleCurrentChange(val) {
      this.page.page = val;
      this.$emit('pageChange', this.page);
    }
  }
}
</script>
<style>
.pagination {
  margin: 20px 0;
}
</style>

使用创建的分页组件

<pagination :total="total" @pageChange="pageChange"></pagination>
// 页码切换
pageChange(item) {
  this.searchContent.page = item.page;
  this.searchContent.limit = item.limit;
  this.getList();
},

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 #Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 #Javascript
You might like
Php注入点构造代码
2008/06/14 PHP
PHP ajax 分页类代码
2008/11/13 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
laravel学习教程之存取器
2016/07/30 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python sorted函数原理解析及练习
2020/02/10 Python
python的launcher用法知识点总结
2020/08/07 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
大学生就业自我鉴定
2013/10/26 职场文书
公证委托书大全
2014/04/04 职场文书
运动会演讲稿100字
2014/08/25 职场文书
世界红十字日活动总结
2015/02/10 职场文书
军事理论课感想
2015/08/11 职场文书