Problems encountered:
- Click on a field in the list, showing a specified id (other filtering criteria) data
Prior to solve this problem, we must first understand Table Antd in Column Column description data objects, it is one of columns, Column using the same API. Official website address
We can know: render generated rendering function of complex data, the parameters are (current value line, the current line data , row index), @ return which you can set a table row / column merge type function (text, the Record , index) => {}
Click the pop-up list below
solve:
Two way:
- Value props pass directly to the subassembly, the subassembly is then rendered this.props.item
- Id value passed to the subassembly, the subassembly is then passed back by its URL, filter out the background data satisfying the condition.
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 is value: '' , 32 COUNT: '' 33 is }; 34 is the this .Columns = [ 35 { 36 width: 400 , 37 [ title: ' recording time of creation ' , 38 is dataIndex The: ' FIRST_DAY ' , 39 Key: ' FIRST_DAY ' , 40 the render: (The props) => { 41 is // 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 <Happy the User Item = {} = {Record Record loadUserList} = {() => { 106 the this ._loadUsreList () 107 }} /> 108 </ div> 109 ) 110 } 111 112 }, 113 ] 114 } ; 115 1 16 componentDidMount () { 117 the this .getUserList () 1 18 } 119 // process six decimal 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 // process the timestamp 129 timestampToTime = (timestamp) => { 130. var DATE = new new a Date (timestamp * 1000 ); // time stamp is required * 10 1000, the timestamp is not required by the case 13 1000 131 is 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 }
supplement:
0. subassembly to pass values: <Share Happy = { Record } = {loadUserList () => {this._loadUserList ()}} /> received values subassembly
1. Set the value of the state when not directly assigned to use standardized wording
1 this.setState({
2 visible_father: true
3 })
2.