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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
ArrayList类(增强版)
2007/04/04 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue+webpack中配置ESLint
2018/11/07 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
如何实现vue的tree组件
2020/12/03 Vue.js
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python随机取list中的元素方法
2018/04/08 Python
使用python存储网页上的图片实例
2018/05/22 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python for循环及基础用法详解
2019/11/08 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
解决Python使用列表副本的问题
2019/12/19 Python
python实现局域网内实时通信代码
2019/12/22 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
大学生演讲稿范文
2014/01/11 职场文书
青春寄语大全
2014/04/09 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
员工安全责任书范本
2014/07/24 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL