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与C# Windows应用程序交互方法
Jun 29 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
node.js实现爬虫教程
Aug 25 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
详解原生js实现offset方法
Jun 15 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
js消除图片小游戏代码
Dec 11 Javascript
基于JS实现table导出Excel并保留样式
May 19 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 接口类与抽象类的实际作用
2009/11/26 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
利用python代码写的12306订票代码
2015/12/20 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python callable内置函数原理解析
2020/03/05 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
美国折扣网站:jClub
2017/08/07 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
学习心得体会
2014/01/01 职场文书
远程研修随笔感言
2014/02/10 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
竞聘上岗演讲
2014/05/19 职场文书
优秀纪检干部材料
2014/08/27 职场文书
授权收款委托书
2014/09/23 职场文书
奔腾年代观后感
2015/06/09 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
关于Numpy之repeat、tile的用法总结
2021/06/02 Python