Ant Design 学习记录

Posted 2022-09-22 it-ren

遇到的问题： 

• 　　点击列表中的一个字段 ， 显示出一条指定id（其他筛选条件的）数据 

解决这个问题之前，要先了解 Antd的 Table中的  Column  列描述数据对象，是 columns 中的一项，Column 使用相同的 API。  官网地址

从中我们可以知道 :  render  生成复杂数据的渲染函数，参数分别为（当前行的值，当前行数据，行索引），@return 里面可以设置表格行/列合并 类型是函数 (text, record, index) =>   

 

 

 

 

 

 

 点击后弹出以下列表

解决：

两种写法 ：

1. 直接给子组件传 props值， 然后子组件渲染this.props.item
2. 给子组件传id值，然后子组件通过URL传给后台，后台筛选出满足条件的数据。

  1 import React, Component from ‘react‘;
  2 import  PageHeader, Table, Input, Card  from "antd";
  3 import HttpUtils from "../../utils/HttpUtils";
  4 import moment from "moment";
  5 import FilterForm from "../../components/Filter";
  6 import Team from ‘./StatisticalTeam‘;
  7 import Share from ‘./StatisticalShare‘;
  8 import User from ‘./StatisticalUser‘;
  9 
 10 const TextArea = Input;
 11 const select = [
 12     
 13         name: ‘时间‘,
 14         type: ‘date‘,
 15         dataIndex: [‘start_time‘, ‘end_time‘],
 16         // wrap: 24
 17     
 18 ]
 19 
 20 export default class Hello extends Component 
 21     constructor(props) 
 22         super(props);
 23         this.state = 
 24             form: 
 25                 pers: 10,
 26                 page: 1
 27             ,
 28             loading:false,
 29             values: ,
 30             dataSource: [],
 31             value: ‘‘,
 32             count: ‘‘
 33         ;
 34         this.columns = [
 35                
 36                 width:400,
 37                 title: ‘记录创造时间‘,
 38                 dataIndex: ‘first_day‘,
 39                 key: ‘first_day‘,
 40                 render: (props) => 
 41                     // return this.timestampToTime(props);
 42                     const  time =  this.timestampToTime(props);
 43                    return moment(time).format(‘YYYY-MM-DD hh:mm:ss‘)
 44                 
 45             ,
 46             
 47                 title: ‘分享‘,
 48                 dataIndex: ‘share_award_real_amount‘,
 49                 key: ‘share_award_real_amount‘,
 50                 render: (text, record) => 
 51                     return (
 52                         <div
 53                         onClick=() => 
 54                             this.setState(
 55                                 visible_pwd: true,
 56                                 user_id: record.id
 57                             )
 58                         
 59                         
 60                         style=marginRight: 10, cursor: "pointer", color: ‘#40a9ff‘
 61                         >
 62                               <Share item=record loadUserList=()=> 
 63                                 this._loadUserList()
 64                             />    
 65                     </div>
 66                     )
 67                 
 68             , 
 69                 title: ‘团队‘,
 70                 // dataIndex: ‘share_award_real_amount‘,
 71                 // key: ‘share_award_real_amount‘,
 72                 render: (text, record) => 
 73                     return (
 74                         <div
 75                         onClick=() => 
 76                             this.setState(
 77                                 visible_pwd: true,
 78                                 user_id: record.id
 79                             )
 80                         
 81                         
 82                         style=marginRight: 10, cursor: "pointer", color: ‘#40a9ff‘
 83                         >
 84                             <Team item=record loadUserList=()=> 
 85                                 this._loadUserList()
 86                             />           
 87                     </div>
 88                     )
 89                 
 90             , 
 91                 width: 140,
 92                 title: ‘用户‘,
 93                 render: (text, record) => 
 94                     return (
 95                         <div
 96                         onClick=() => 
 97                             this.setState(
 98                                 visible_pwd: true,
 99                                 user_id: record.id
100                             )
101                         
102                         
103                         style=marginRight: 10, cursor: "pointer", color: ‘#40a9ff‘
104                         >
105                               <User   happy=record  item=record loadUserList=()=> 
106                                 this._loadUsreList()
107                             />           
108                     </div>
109                     )
110                 
111 
112             ,
113         ]
114     ;
115 
116     componentDidMount() 
117         this.getUserList()
118     
119     //处理六位小数
120     toDecimal=(x)=> 
121         var f = parseFloat(x); 
122         if (isNaN(f))  
123           return; 
124          
125         f = Math.round(x*1000000)/1000000; 
126         return f; 
127     
128     //处理时间戳
129     timestampToTime = (timestamp) => 
130         var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
131         var Y = date.getFullYear() + ‘-‘;
132         var M = (date.getMonth()+1 < 10 ? ‘0‘+(date.getMonth()+1) : date.getMonth()+1) + ‘-‘;
133         var D = date.getDate() + ‘ ‘;
134         var h = date.getHours() + ‘:‘;
135         var m = date.getMinutes() + ‘:‘;
136         var s = date.getSeconds();
137         return Y+M+D+h+m+s;
138     
139 
140 
141     getUserList() 
142         this.setState(loading:true)
143         HttpUtils.postForm(‘/api/auex/statistics/award/list‘, 
144             ...this.state.form,
145             order: "id desc",
146             ...this.state.values
147         ).then(res => 
148         this.setState(loading:false)
149             if (res.status == 10000) 
150                 this.setState(
151                     dataSource: res.data,
152                     count: res.count
153                 )
154             
155             console.log(res);
156         ).catch(err => 
157         this.setState(loading:false)
158             window.$message.error(‘通讯失败‘)
159         )
160     
161 
162   
163 
164     onSubmit = (value) => 
165         console.log(value)
166         this.setState(
167             form: 
168                 page: 1,
169                 pers: this.state.form.pers,
170 
171             ,
172             values: value
173         , () => 
174             this.getUserList()
175         )
176     
177     onReset = () => 
178         this.setState(
179             values: 
180         , () => 
181             this.getUserList();
182         )
183     
184 
185     getCurrent = (page) => 
186         console.log(page)
187         this.setState(
188             form: 
189                 page: page,
190                 pers: this.state.form.pers
191             
192         , () => this.getUserList())
193     
194     changePers = (current, size) => 
195         this.setState(
196             form: 
197                 page: current,
198                 pers: size
199             
200         , () => this.getUserList())
201     
202 
203     render() 
204         return (
205             <div>
206                 <PageHeader title="用户列表" subTitle="查看用户信息" style=marginBottom: 20/>
207                 <FilterForm select=select onSubmit=this.onSubmit onReset=this.onReset />
208                 <Card>
209                     <Table
210                         loading=this.state.loading
211                         dataSource=this.state.dataSource
212                        columns=this.columns 
213                        title=() => `记录条数：$this.state.count条`
214                        pagination=
215                            showTotal: (total) => 
216                                return <div style=display: ‘flex‘>
217                                    <div style=paddingLeft: 18>总共total条</div>
218                                </div>
219                            ,
220                            showSizeChanger: true,
221                            onShowSizeChange: this.changePers,
222                            pageSizeOptions: [‘10‘, ‘30‘, ‘50‘, ‘100‘],
223                            showQuickJumper: true,
224                            current: this.state.form.page,
225                            total: this.state.count,
226                            onChange: this.getCurrent
227                        
228                 />
229                 </Card>
230             </div>
231         )
232     ;
233 

列表页面

补充：

     0.给子组件传值  ：  <Share happy=record loadUserList=()=> this._loadUserList()/>   子组件接收值 

     1.设置state中值的时候 不要直接赋值 ， 要 使用规范写法

1 this.setState(
2                             visible_father: true
3                         )

     2.子组件接到数后不能展示列表？ 

1  onClick=() => 
2                         this.setState(
3                             visible_father: true  //修改列表展示为true
4                         )
5                     

 

占位