1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > react ant Design UI中table组件合并单元格并展开详情的问题

react ant Design UI中table组件合并单元格并展开详情的问题

时间:2019-08-09 21:11:44

相关推荐

react  ant Design UI中table组件合并单元格并展开详情的问题

需求:购物车订单列表,如图:

一:单元格合并

遇到这种你会怎么办呢? 单元格合并? 还是其他的方法?

下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似,只有一个的类似于‘实付’这种当然就不需要render属性了

let columns =[{ title: '商品', dataIndex: 'name', align:'center', key: 'name',render: (value, row, index) => {return (row.goodslist.map(goods=>{return(<div key={goods.name} className='name'><span>{goods.name}</span></div> ) }))}},.......]

二:表格的展开项

对于下面的展开项,这儿采用的还是antd的table组件自带的, 只是把前面的+ 变为后面的"展开详情"四个字而已,那么如何让前面的+号消失呢,查了doc 发现并没有,后来得知,我们可以这样做:table中添加

expandIconAsCell={false} //隐藏+号expandedRowKeys={this.state.expandedKey} //展开行的key值(每行必须有key值才能展开)

以下是我的code:

<Tablelocale={locale}columns={columns}dataSource={list}pagination={false} expandIconAsCell={false} //隐藏+号expandIconColumnIndex={-1} expandedRowKeys={this.state.expandedKey} //展开行的key值(每行必须有key值才能展开)expandedRowRender={ remark => //展开行的内容<div className='shrInfo'><p><span>收货人:{remark.name}</span><span>收货手机号:{remark.phone}</span><span>收货地址:{remark.address}</span><span>支付时间:{remark.payTime?remark.payTime:'暂无'}</span></p>{ remark.status ==='已完成'?(<p><span>快递公司:&nbsp;{remark.express.type}</span><span>快递单号:&nbsp;{remark.express.number}</span></p>):('')}</div> }/>

由于每行必须要有key值才可以展开,所以我们可以在获取数据时,进行遍历,然后添加自定义属性key值,然后我们就可以处理是展开详情还是关闭详情了,这儿是用数组处理的

html: <a href="javascript:;" className='block scan' onClick={(e) => {this.isExpanded(row, e.target)}}>查看详情</a > js:

// 展开行isExpanded = (row, html) => {const expandedKey = this.state.expandedKey;if(expandedKey.indexOf(row.key) == -1) {html.innerHTML = "收起详情";expandedKey.push(row.key);}else{for(let i = 0; i < expandedKey.length; i++) {if(expandedKey[i] === row.key) {html.innerHTML = "查看详情";expandedKey.splice(i, 1);}}}this.setState({expandedKey //设置展开行的key值 });}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。