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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
详解vue-cli3使用
Aug 14 Javascript
js实现无缝轮播图
Mar 09 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中生成随机密码的自定义函数代码
2013/10/21 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
解决Django连接db遇到的问题
2019/08/29 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python的Jenkins接口调用方式
2020/05/12 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
PHP笔试题
2012/02/22 面试题
什么是.net的Remoting技术
2016/07/08 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
go语言中http超时引发的事故解决
2021/06/02 Golang