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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
再探JavaScript作用域
Sep 24 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
node.js博客项目开发手记
Mar 16 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php设置编码格式的方法
2013/03/05 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
几道PHP的面试题
2012/05/19 面试题
机电专业毕业生求职信
2013/10/27 职场文书
统计员岗位职责
2013/11/14 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
黄河绝恋观后感
2015/06/08 职场文书
百家讲坛观后感
2015/06/12 职场文书
法定代表人资格证明书
2015/06/18 职场文书
企业法人代表证明书
2015/06/18 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python