React后台管理系统-table-list组件

React后台管理系统-table-list组件

table-list组件可用于商品列表，用户列表页面

需要传入一个tableHeads集合和tablebody

1. import React from 'react';
2.  
3. // 通用的列表
4. class TableList extends React.Component{
5.     constructor(props){
6.         super(props);
7.         this.state = {
8.             isFirstLoading: true
9.         }
10.     }
11.     componentWillReceiveProps(){
12.         // 列表只有在第一次挂载的时候，isFirstLoading为true，其他情况为false
13.         this.setState({
14.             isFirstLoading : false
15.         });
16.     }
17.     render(){
18.         // 表头信息
19.         let tableHeader = this.props.tableHeads.map(
20.             (tableHead, index) => {
21.                 if(typeof tableHead === 'object'){
22.                     return <th key={index} width={tableHead.width}>{tableHead.name}</th>
23.                 }else if(typeof tableHead === 'string'){
24.                     return <th key={index}>{tableHead}</th>
25.                 }
26.             }
27.         );
28.         // 列表内容
29.         let listBody = this.props.children;
30.         // 列表的信息
31.         let listInfo = (
32.             <tr>
33.                 <td colSpan={this.props.tableHeads.length} className="text-center">
34.                     {this.state.isFirstLoading ? '正在加载数据...' : '没有找到相应的结果~'}</td>
35.             </tr>
36.         );
37.         //当listBody.length<=0,第一次加载的时候firstLoading=true，显示"正在加载数据"
38.         //当listBody.length<=0,第一次加载的时候firstLoading=false，显示"正在加载数据"
39.         let tableBody = listBody.length > 0 ? listBody : listInfo;
40.         return (
41.             <div className="row">
42.                 <div className="col-md-12">
43.                     <table className="table table-striped table-bordered">
44.                         <thead>
45.                             <tr>
46.                                 {tableHeader}
47.                             </tr>
48.                         </thead>
49.                         <tbody>
50.                             {tableBody}
51.                         </tbody>
52.                     </table>
53.                 </div>
54.             </div>
55.         );
56.     }
57. }
58.  
59. export default TableList;

查看全文