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开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue3不同环境下实现配置代理
May 25 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与SQL注入攻击[二]
2007/04/17 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python pytest进阶之fixture详解
2019/06/27 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
怎样声明子类
2013/07/02 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
农村文化建设标语
2014/10/07 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
企业宣传稿范文
2015/07/23 职场文书