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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 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 header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
详解PHP中的PDO类
2015/07/06 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
python搜索指定目录的方法
2015/04/29 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
python给list排序的简单方法
2020/12/10 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
期末自我鉴定
2014/01/23 职场文书
高三学习决心书
2014/03/11 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
神龙架导游词
2015/02/11 职场文书
团员个人总结
2015/02/26 职场文书
幼师自荐信范文
2015/03/06 职场文书
个人总结格式范文
2015/03/09 职场文书
绿色环保倡议书
2015/04/28 职场文书
绿里奇迹观后感
2015/06/15 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers