基于iview 封装一个vue 表格分页组件

时间:2021-09-01 19:49:44

iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的

iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天系统框架,十分方便。

下面我们就简单封装一个分页插件

首先引用iview的分页

<Page :total="total" :page-size="pageSize" :page-size-opts="[10]" show-sizer show-total @on-change="changePage" @on-page-size-change="changeNum"></Page>
其中total是总条数,page-size是每页条数 page-size-opts是页数 changeNum方法是每页条数变化 changePage方法把封装好的每页条数和页数传到调用此组件的父页面
props: ['total', 'changePageCallback'], //changePageCallback是回调的方法
changePage (page) {
this.changePageCallback(page, this.pageSize);
// 这边调用 回调函数将 页码返回上一级调用的页面
},
changeNum (num) {
this.pageSize = num;
} 然后在父页面简单调用就可以了
<page-sizes :total="total" :changePageCallback="changePageCallback"></page-sizes>//父页面引用
// 分页回调
changePageCallback (page, pageSize) {
//此时的page为传过来的页数,pageSize为每页条数
},
														
		

基于iview 封装一个vue 表格分页组件的更多相关文章

  1. 手把手从零开始---封装一个vue视频播放器组件

    现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...

  2. 基于antd封装一个高可用form组件 减少cv代码导致的bug

    引言 在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比 ...

  3. 基于Vue&period;js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  4. Vue &plus; Element-ui实现后台管理系统&lpar;5&rpar;---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  5. Vue&period;js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  6. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  7. 基于 element-plus 封装一个依赖 json 动态渲染的查询控件

    前情回顾 基于 el-form 封装一个依赖 json 动态渲染的表单控件 Vue3 封装第三方组件(一)做一个合格的传声筒 功能 使用 vue3 + element-plus 封装了一个查询控件,专 ...

  8. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  9. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

随机推荐

  1. &dollar;&lpar;&quot&semi;&quot&semi;&rpar;&period;click与onclick的区别

    onclick是绑定事件,click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,下面示例 Html代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  2. 产品经理技能之MRD的笔记之一

    原文:http://www.woshipm.com/pmd/131946.html/comment-page-1 产品经理技能之MRD 一.MRD与BRD的不同之处 BRD:这么做有什么好处,并说明好 ...

  3. HashMap陷入死循环的例子

    //使用这个例子可以模拟HashMap陷入死循环的效果,可能需要执行多次才会出现. 1 package com.hanzi; import java.util.HashMap; public clas ...

  4. BZOJ 1019 &colon;&lbrack;SHOI2008&rsqb;汉诺塔&lpar;递推&rpar;

    好吧蒟蒻还是看题解的 其实看到汉诺塔就该想到是递推了 设f[i][j]表示i个在j杆转移到另一个杆的次数 g[i][j]表示i个在j杆转移到那个杆上 可得 f[i][j]=f[i-1][j]+1+f[ ...

  5. 关于Scanner类

    Scanner类 1.常用的两个方法:         public int nextInt():获取一个int类型的值         public String nextLine():获取一个St ...

  6. 推荐学习git

    龙恩博客http://www.cnblogs.com/tugenhua0707/p/4050072.html#!comments git命令大全https://www.jqhtml.com/8235. ...

  7. webservice接口的开发和调用

    一.WebService的开发手段 使用Java开发WebService时可以使用以下两种开发手段 1. 使用JDK开发(1.6及以上版本) 2.使用CXF框架开发(工作中) 二.使用JDK开发Web ...

  8. Hash值破解工具Hashcat使用

    Hash值破解工具Hashcat使用 Hashcat介绍 HashCat系列软件拥有十分灵活的破解方式,可以满足绝大多数的破解需求. Hashcat系列软件是比较牛逼的密码破解软件,系列软件包含Has ...

  9. sqlmap命令详解

    cookie注入:sqlmap.py -u 注入点 --cookie "参数" --tables --level 2 POST登录框注入:sqlmap.py -r 从文件读取数据 ...

  10. Spark(十六)DataSet

    Spark最吸引开发者的就是简单易用.跨语言(Scala, Java, Python, and R)的API. 本文主要讲解Apache Spark 2.0中RDD,DataFrame和Dataset ...

相关文章