React后台管理系统- rc-pagination分页组件封装
1.用户列表页面使用的rc-pagination分页组件
Github地址: https://github.com/react-component/pagination
2.安装
cnpm install --save-dev rc-pagination
3.引入
- import React from 'react';
- import RcPagination from 'rc-pagination';
- import 'rc-pagination/dist/rc-pagination.min.css';
4.封装成组件,在util里边新建文件夹Pagination,里边新建 index.jsx
- import React from 'react';
- import RcPagination from 'rc-pagination';
- import 'rc-pagination/dist/rc-pagination.min.css';
- class Pagination extends React.Component{
- constructor(props){
- super(props);
- }
- render(){
- return(
- <div className="row">
- <div className="col-md-12">
- <RcPagination {...this.props}
- hideOnSinglePage
- showQuickJumper/>
- </div>
- </div>
- );
- }
- }
5.使用, Pagination组件里边要传入两个参数,一是current 当前页,二是total总记录数, pageSize每一页的记录数量默认为10
- import Pagination from 'util/pagination/index.jsx';
- <Pagination current={this.state.pageNum}
- total={this.state.total}
- onChange={(pageNum) => {this.onPageNumChange(pageNum)}}/>
6.Pagination组件里边可以定义onchange事件, Function(current, pageSize) ,参数是当前页current和pageSizeme每页的记录数
React后台管理系统- rc-pagination分页组件封装的更多相关文章
- React后台管理系统-商品管理列表组件
1.商品列表页面结构 <div id="page-wrapper"> <PageTitle title="商品列表" ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- elementUI分页组件封装
在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以 ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 《React后台管理系统实战 零》:基础笔记
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
- React后台管理系统-用户列表页面
1.页面的结构 //遍历list, 返回数据 let listBody= this.state.list.map((user,index)=> { return ...
随机推荐
- 「模拟赛20180306」回忆树 memory LCA+KMP+AC自动机+树状数组
题目描述 回忆树是一棵树,树边上有小写字母. 一次回忆是这样的:你想起过往,触及心底--唔,不对,我们要说题目. 这题中我们认为回忆是这样的:给定 \(2\) 个点 \(u,v\) (\(u\) 可能 ...
- 解决Win10中vmware运行特别慢问题
1.关闭防火墙:win+S打开搜索框,输入防火墙,选择windowsDefender防火墙 ,如图: 2.启用或关闭防火墙,如图: 3.关闭防火墙,两个选项都关闭,如图: 4.打开VMware,如果速 ...
- 阿里maven镜像配置
setting.xml<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven< ...
- .netcore中无法使用System.Drawing --解决方案
问题重现: 无法正常使用 解决方法: 安装System.Drawing.Common的NuGet就能正常使用了 操作之后: 这个是.netcoe中的解决办法,.net framework解决方案中添 ...
- Unity 行为树-基础
.前言 Unity里面的行为树又名BehaviorTree,最常用在NPC的敌人逻辑中. 二.基础说明(转载) 1.行为树的调用时间为每帧: 2.每个节点的状态只能下面3个中的其一:成功Success ...
- RandomAccesssFileTest
package com.yd.wmsc.util; import java.io.IOException; import java.io.RandomAccessFile; public class ...
- Unity GameObject.Find 和 transform.Find
transform.Find(""); 找到子游戏对象,找自己找不到,能找到未激活的子游戏对象. 括号里可以是游戏对象的名字,也可以是层级. GameObject.Find(&qu ...
- android 开发-ListView与ScrollView事件冲突处理(事件分发机制处理)
ListView和ScrollView都存在滚动的效果,所以一般不建议listView和scrollView进行嵌套使用,但有些需求则需要用到两者嵌套.在android的学习中学了一种事件分发处理机制 ...
- net 提供了Thread类用于线程的操作
net 提供了Thread类用于线程的操作. 当初始化一个线程,把Thread.IsBackground=true的时候,指示该线程为后台线程.后台线程将会随着主线程的推出而退出.后台线程不妨碍程序的 ...
- iOS 收藏的笔记
目录 UI 资料类 网络篇 图表 动画 菜单栏 数据存储和数据库 第三方库 社交分享 刷新 视频音频 其他 阅读 JS 导航 系统 支付 书籍 工具类 完整项目收集 DEMO UI http://ww ...