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值
        });
    }