基于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是目前比较好用的开源滚动库,提供很 ...
随机推荐
- Vue系列之 => webpack的url loader
安装: npm i url-loader file-loader -D //url-loader内部依赖file-loader webpack.config.js const path = requ ...
- .Net Collection Distinct 去重
由于业务场景的需要,海量的数据需要进行处理.组装,难免会出现冗余的重复数据.如何处理重复的数据就是一个问题. 简单的集合中,去重就可以用linq distinct来完成.对于复杂的集合直接使用dist ...
- Linux基础命令---free显示内存使用
free free指令用来显示内存的使用情况,显示系统中可用和已使用的物理和交换内存的总量,以及内核使用的缓冲区.应该忽略共享内存列:它已经过时了. 此命令的适用范围:RedHat.RHEL.Ubun ...
- spring-boot集成activiti的model遇到问题汇总
按照网上的七拼八凑整合网页版的部署将遇到的问题归置如下: 本人的springboot版本是:1.5.13.RELEASE 工作流相关: <!--工作流--> <dependency& ...
- redis 在 php 中的应用(List篇)
本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: List(列表) LPUSH LPUSHX RPUSH R ...
- python generator用法
转自:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0013868196510 ...
- flutter 读取sdcard权限问题相关
https://stackoverflow.com/questions/46698751/permission-denied-at-externalstoragedirectory-access-vi ...
- 7步快速解决SQLServer数据库(2008版)重装问题
最近遇到了鼠标双击启动不了数据库的问题,根据事件管理器和自己的最近的使用情况初步判断估计是自己在用360误伤了数据库(哭) 没有办法只好重新安装一下了,参考了网上的一些大神们的教程然后自己实战操作一下 ...
- wqweqweqwe
本文目录 1 会话跟踪技术 2 cookie介绍 Django中操作Cookie Session Django中Session相关方法 Django中的Session配置 CBV中加装饰器 回到目录 ...
- JS制作蔡徐坤打篮球小游戏(鸡你太美?)
一.前提: 和我之前写的 QT小球游戏 差不多(指的是实现方法). 感谢大佬的 Github:https://github.com/kasuganosoras/cxk-ball 外加游戏网页:http ...