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： 

 　　　　　　　　　　　　< 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>快递公司:&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值 
         });
    } 

 

查看更多关于react ，ant Design UI中table组件合并单元格并展开详情的问题的详细内容...