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 相关文章推荐
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
thinkphp框架实现删除和批量删除
2016/06/29 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Python中的类学习笔记
2014/09/23 Python
Python 功能和特点(新手必学)
2015/12/30 Python
用Python写冒泡排序代码
2016/04/12 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python实现简易版计算器
2020/06/22 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
python中的逆序遍历实例
2019/12/25 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
大数据分析用java还是Python
2020/07/06 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
药品营销专业毕业生自荐信
2014/07/02 职场文书
博士生导师推荐信
2014/07/08 职场文书
运动会加油稿50字
2015/07/21 职场文书
责任书格式
2019/04/18 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书