React后台管理系统-table-list组件
table-list组件可用于商品列表,用户列表页面
需要传入一个tableHeads集合和tablebody
- import React from 'react';
- // 通用的列表
- class TableList extends React.Component{
- constructor(props){
- super(props);
- this.state = {
- isFirstLoading: true
- }
- }
- componentWillReceiveProps(){
- // 列表只有在第一次挂载的时候,isFirstLoading为true,其他情况为false
- this.setState({
- isFirstLoading : false
- });
- }
- render(){
- // 表头信息
- let tableHeader = this.props.tableHeads.map(
- (tableHead, index) => {
- if(typeof tableHead === 'object'){
- return <th key={index} width={tableHead.width}>{tableHead.name}</th>
- }else if(typeof tableHead === 'string'){
- return <th key={index}>{tableHead}</th>
- }
- }
- );
- // 列表内容
- let listBody = this.props.children;
- // 列表的信息
- let listInfo = (
- <tr>
- <td colSpan={this.props.tableHeads.length} className="text-center">
- {this.state.isFirstLoading ? '正在加载数据...' : '没有找到相应的结果~'}</td>
- </tr>
- );
- //当listBody.length<=0,第一次加载的时候firstLoading=true,显示"正在加载数据"
- //当listBody.length<=0,第一次加载的时候firstLoading=false,显示"正在加载数据"
- let tableBody = listBody.length > 0 ? listBody : listInfo;
- return (
- <div className="row">
- <div className="col-md-12">
- <table className="table table-striped table-bordered">
- <thead>
- <tr>
- {tableHeader}
- </tr>
- </thead>
- <tbody>
- {tableBody}
- </tbody>
- </table>
- </div>
- </div>
- );
- }
- }
- export default TableList;
React后台管理系统-table-list组件的更多相关文章
- React后台管理系统-添加商品组件
引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...
- React后台管理系统- rc-pagination分页组件封装
1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...
- React后台管理系统-首页Home组件
1.Home组件要显示用户总数.商品总数和订单总数,数据请求后端的 /manage/statistic/base_count.do接口,返回的是 this.state = { u ...
- 《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后台管理系统开发手记:AntD Table基础表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
- 《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数
一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...
随机推荐
- oracle基本命令
1.首先,创建(新)用户: create user username identified by password; username:新用户名的用户名 password: 新用户的密码也可以不创建新 ...
- bzoj5506:[gzoi2019]旅行者
传送门 正反两边dijkstra染色,然后枚举一下边,求出最小值就好啦 代码: #include<cstdio> #include<iostream> #include< ...
- vue2中使用ajax
vue中本身没有ajax功能,需要使用扩展,现在推荐使用的是axios,github地址如下 https://github.com/axios/axios 下面各个示例 <!DOCTYPE ht ...
- DHCP服务器的设计
介绍 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境中的主机动态的 ...
- Apache服务器配置虚拟域名
我在别处发的帖子 http://www.52pojie.cn/thread-599829-1-1.html
- 洛谷P4891 序列 || 膜法阵,魔法阵
https://www.luogu.org/problemnew/show/P4891 一道几乎一样的题http://210.33.19.103/contest/1130/problem/3 题面ht ...
- TcxGrid Column动态添加Image
MyCol := TcxColumn.Create; ... MyCol.PropertiesClass := TcxImageProperties; ImageProps := TcxImagePr ...
- sql数据库发布、订阅同步方式操作
Sql数据库发布订阅分为两个步骤:1.发布.2.订阅.首先在数据源数据库服务器上对需要同步的数据进行发布,然后在目标数据库服务器上对上述发布进行订阅. 一.发布. 发布需要用实际的服务器名称,不能使用 ...
- java——helloword
第一次接触Java,感觉乱乱的,需要捋清楚一些概念再安装java. 首先,什么是JDK,什么是JRE呢? JRE:JAVA运行环境(Java Runtime Envirnment) JDK:Java开 ...
- JS——jquery UI
1. draggable() 滑动条demo: <!DOCTYPE html> <html lang="en"> <head> <meta ...