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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python list操作用法总结
2015/11/10 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python基于百度云文字识别API
2018/12/13 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
物业门卫岗位职责
2013/12/28 职场文书
产品质量承诺书范文
2014/03/27 职场文书
三年级小学生评语
2014/04/22 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
前台接待员岗位职责
2015/04/15 职场文书
法院答辩状格式
2015/05/22 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python