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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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个人网站架设连环讲(二)
2006/10/09 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
javascript 闭包详解
2015/07/02 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
python encode和decode的妙用
2009/09/02 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python自动抢红包教程详解
2019/06/11 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python多进程重复加载的解决方式
2019/12/13 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
女大学生个人求职信
2013/12/09 职场文书
公司合作协议书范本
2014/04/18 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
公司员工离职证明书
2014/10/04 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android