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+Element实现增删改查的示例源码
Nov 23 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python中的作用域规则详解
2015/01/30 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python连接mongodb密码认证实例
2018/10/16 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python偏函数实现原理及应用
2020/11/20 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
男方婚礼答谢词
2015/01/20 职场文书
护林员个人总结
2015/03/04 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
SpringBoot Http远程调用的方法
2022/08/14 Java/Android