vue+iview分页组件的封装


Posted in Vue.js onNovember 17, 2020

vue+iview的分页组件封装

1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件

2.index.less文件

//需要修改的样式
.ivu-page-options {
 margin-left: 10px;

 .ivu-page-options-sizer {
  margin-right: 0;
 }
 }

3.index.js文件

import "./index.less";
import component from "./src/main";

/* istanbul ignore next */
component.install = function (Vue) {
 Vue.component(component.name, component);
};

export default component;

4.src文件夹中的main.vue

<template>
 <!-- 分页组件 -->
 <Page
 class="saas-pagination"
 ref="page"
 :loading="loading"
 :disabled="disabled"
 :total="total"
 :show-sizer="sizer"
 :show-elevator="elevator"
 :current="params.page"
 :page-size="params.rows"
 :page-size-opts="sizeOpts"
 @on-change="currentChange"
 @on-page-size-change="pageChange"/>
</template>

<script>
export default {
 props: {
 loading: {
  type: Boolean,
  default: false
 },
 total: {
  // 数据总数
  type: [String, Number],
  default: 0
 },
 page: {
  // 当前分页
  type: [String, Number],
  default: 1
 },
 rows: {
  // 每页显示多少条
  type: [String, Number],
  default: 10
 },
 disabled: {
  type: Boolean,
  default: false
 },
 sizer: {
  // 是否显示下拉组件
  type: Boolean,
  default: false
 },
 elevator: {
  // 是否显示跳转输入框
  type: Boolean,
  default: false
 }
 },
 watch: {
 page (to) {
  this.params.page = to;
 },

 rows (to) {
  this.params.rows = to;
 }
 },
 data () {
 return {
  sizeOpts: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  params: {
  page: 1,
  rows: 10
  }
 }
 },
 methods: {
 // 分页改变
 currentChange (current) {
  this.params.page = current;
  this.onChange();
 },
 // 每页显示条数改变
 pageChange (rows) {
  this.params.page = 1;
  this.params.rows = rows;
  this.onChange();
 },

 onChange () {
  this.$emit("on-change", JSON.parse(JSON.stringify(this.params)));
 },

 reset () {
  this.params = {
  page: 1,
  rows: 10
  }
  this.onChange();
  // 当前页码还原
  // this.$refs.page.currentPage = 1;
 }
 }
}
</script>

5.在components中创建index.js,用于全局引入

import GlobalPage from "@/components/pagination/index.js";
export default (Vue) => {
 Vue.component("GlobalPage ", GlobalPage );
}

6然后在全局的main.js引入,可全局使用

import components from "@/components/index.js";
Vue.use(components)

7.组件的使用

<template>
 <div>
  <global-page 
  ref="pagination"
  :sizer="true"
  :page="formData.page"
  :rows="formData.rows"
  :total="total"
  @on-change="pageChange">
  </global-page>
 </div>
</template>
<script>
export default {
 data(){
 return {
  total: 0, // 数据总数
  queryForm:{},
  formData: {
   page: 1,
   rows: 10,
  }
  }
 },
 methods: {
  // 分页切换
 pageChange (params) {
  this.queryForm.page = params.page
  this.queryForm.rows = params.rows
  //查询数据的方法
  this.search(this.queryForm)
 },
 }
}

</script>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
You might like
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP 编程安全性小结
2010/01/08 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
Javascript 赋值机制详解
2014/11/23 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
深入理解React高阶组件
2017/09/28 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python 求定积分和不定积分示例
2019/11/20 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
付款委托书范本
2014/04/04 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers