标签：购物 其他 png ima ... const scan lse ===
需求：购物车订单列表，如图：
一：单元格合并
遇到这种你会怎么办呢？ 单元格合并？ 还是其他的方法？
下面是我的处理方式，就是在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：
<Table locale={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>快递公司: {remark.express.type}</span> <span>快递单号: {remark.express.number}</span> </p> ):(‘‘) } </div> } />
由于每行必须要有key值才可以展开，所以我们可以在获取数据时，进行遍历，然后添加自定义属性key值，然后我们就可以处理是展开详情还是关闭详情了，这儿是用数组处理的
// 展开行 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值 }); }
react ，ant Design UI中table组件合并单元格并展开详情的问题
标签：购物 其他 png ima ... const scan lse ===
原文地址：https://www.cnblogs.com/aloehui/p/9007418.html
