vue 基于element-ui 分页组件封装的实例代码


Posted in Javascript onDecember 10, 2018

具体代码如下所示:

<template>
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
 </el-pagination>
</template>
<script type="text/ecmascript-6">
export default {
 components: {
 },
 data() {
  return {
  }
 },
 props: {
  pageSize: {
   type: Number,
   default: 10
  },
  total: {
   type: Number,
   default: 1
  }
 },
 watch: {
 },
 methods: {
  //每页展示条数
  handleSizeChange(val) {
   //事件传递
   this.$emit('handleSizeChangeSub', val);
  },
  //当前页
  handleCurrentChange(val) {
   //事件传递
   this.$emit('handleCurrentChangeSub', val);
  }
 },
 // 过滤器设计目的就是用于简单的文本转换
 filters: {},
 // 若要实现更复杂的数据变换,你应该使用计算属性
 computed: {
 },
 created() {
 },
 mounted() {},
 destroyed() {}
}
</script>
<style lang="scss" type="text/css" scoped>
</style>

调用

// 分页
import pages from 'components/common/pages/pages'
components: {
pages
 },
<pages :total="total" :page-size="pageSize" @handleSizeChangeSub="handleSizeChangeFun" @handleCurrentChangeSub="handleCurrentChangeFun"></pages>
handleSizeChangeFun(v) {

this.pageSize = v;

this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //页面点击
 
this.pageNum = v; //当前页
 
this._enterpriseList(); //更新列表
}

补充:下面看下Element-ui组件--pagination分页

一般写后台系统都会有很多的列表,有列表就相应的要用到分页,根据项目中写的几个分页写一下我对分页的理解,就当是学习笔记了。

这是Element-ui提供的完整的例子

<template> <div class="block"> 
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[100, 200, 300, 400]"//这事下拉框可以选择的,选择一夜显示几条数据
  :page-size="100" //这是当前煤业显示的条数
  layout="total, sizes, prev, pager, next, jumper"
  :total="400" //这个是总共有多少条数据,把后台获取到的数据总数复制给total就可以了
>
 </el-pagination>
 </div>
</template>
<script>
 export default {
 methods: {
  handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  }
 },
 data() {
  return {
  total:'0',
  currentPage: 4
  };
 }
 }
</script>

以下是我自己在项目中用到的分页

<div style="float:right;margin-top:20px;">
  <el-pagination
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :current-page="currentPage4"
   :page-sizes="[5, 10, 20, 30]"
   :page-size="pageSize"  //写代码时忘记把pageSize赋值给:page-size了,
 

layout="total, sizes, prev, pager, next, jumper" 



:total="totalCount"> 


</el-pagination>
</div>

总结

以上所述是小编给大家介绍的vue 基于element-ui 分页组件封装的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
js运动应用实例解析
Dec 28 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
微信小程序日历效果
Dec 29 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 #Javascript
express 项目分层实践详解
Dec 10 #Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 #Javascript
微信小程序分享海报生成的实现方法
Dec 10 #Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 #Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP 第一节 php简介
2012/04/28 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
TensorFlow变量管理详解
2018/03/10 Python
基于Python的PIL库学习详解
2019/05/10 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
NumPy统计函数的实现方法
2020/01/21 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
python中reload重载实例用法
2020/12/15 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
实习评语
2013/12/16 职场文书
硕士生工作推荐信
2014/03/07 职场文书
大学军训感言300字
2014/03/09 职场文书
初中班主任评语大全
2014/04/24 职场文书
某某同志考察材料
2014/05/28 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书