标签：demo esc xtend alt 技术 spl cat sub 直接
解决这个问题之前，要先了解 Antd的 Table中的 Column 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 官网地址
从中我们可以知道 : render 生成复杂数据的渲染函数，参数分别为（当前行的值，当前行数据，行索引），@return 里面可以设置表格行/列合并 类型是函数 (text, record, index) => { }
点击后弹出以下列表
解决：
两种写法 ：
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 }}
占位
标签：demo esc xtend alt 技术 spl cat sub 直接
原文地址：https://www.cnblogs.com/it-Ren/p/11445890.html
