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+iview实现分页及查询功能
Nov 17 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue实现在data里引入相对路径
Jun 05 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根据年月获取季度的方法
2014/03/31 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python 加密与解密小结
2018/12/06 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
电气技术员岗位职责
2013/11/19 职场文书
自我反省检讨书
2014/01/23 职场文书
个人求职信范例
2014/01/29 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
物业品质提升方案
2014/06/08 职场文书
个人总结与自我评价
2014/09/18 职场文书
2015大学迎新标语
2015/07/16 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
Redis实现订单过期删除的方法步骤
2022/06/05 Redis