基于iview 封装一个vue 表格分页组件
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 表格分页组件的更多相关文章
- 手把手从零开始---封装一个vue视频播放器组件
现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...
- 基于antd封装一个高可用form组件 减少cv代码导致的bug
引言 在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比 ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
- 基于 element-plus 封装一个依赖 json 动态渲染的查询控件
前情回顾 基于 el-form 封装一个依赖 json 动态渲染的表单控件 Vue3 封装第三方组件(一)做一个合格的传声筒 功能 使用 vue3 + element-plus 封装了一个查询控件,专 ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
随机推荐
- CentOS 7.5 安装 Python3.7
1.安装开发者工具 yum -y groupinstall "Development Tools" 2.安装Python编译依赖包 yum -y install openssl-d ...
- .net连接数据库递归
private void Form1_Load(object sender, EventArgs e) { List<Regions> regions = GetRegions().Whe ...
- jq+bootstrap响应式系统管理页面
用bootstrap搭建的一个系统管理页面基于经典的HTML+Css 弊端:代码量太大,用vue组件化开发的思想更加便捷且方便!不过如果是做纯展示的系统页面,只需要一些简单的数据交互,用jq配合boo ...
- Ubuntu Win10双系统重启ubuntu出现黑屏情况 Ubuntu引导修复
step 1 : 准备一个Ubuntu grub启动盘 step 2 : 进入Ubuntu启动盘的 Try Ubuntu without install step 3 : 使用终端输入以下命令,记住检 ...
- 哨兵2 NDVI
shp从国外网站下载的,不是很准确了 数据:COPERNICUS/S2 交流合作请联系:ab000c@163.com
- linux 命令中英文对照,收集
linux 命令中英文对照,收集 linux 命令英文全文 Is Linux CLI case-sensitive? The answer is, yes. If you try to run L ...
- postman工具的使用
https://www.cnblogs.com/rookie-c/p/5753948.html#4100341 https://www.jellythink.com/archives/category ...
- iOS进阶之TCP代理鉴权过程
这段时间接触了网络代理,而自己的任务是完成TCP和UDP的网络代理,所以在这里写些自己的理解吧. 这篇文章先介绍一下TCP代理的鉴权过程(采用的是用户名和密码鉴权),下一篇文章再介绍UDP代理的鉴权过 ...
- ionic 实现 应用内(webview中html页面点击) 和 应用外 (浏览器html页面点击) 打开本地安装应用
应用内(webview中html页面点击) : 应用内打开本地安装应用指的是webview里打开应用,需要2个步骤: 1: 需要下载一个cordova插件:com.lampa.startapp ,也可 ...
- SAP主数据文件版本号命名规范
前提说明 最近在实施公司的SAP系统,需要对供应商,成品半成品原辅料,工艺路线,BOM等各种主数据进行收集,由于牵扯到多个部门进行合作整理数据,为了更方便进行文件版本的管理,特意学习下文件版本号命名规 ...