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

Posted doublealoe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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组件合并单元格并展开详情的问题的主要内容,如果未能解决你的问题,请参考以下文章

React开发(181):ant design table中 过滤操作

React中控制Ant Design Table列的显示与隐藏

React中控制Ant Design Table列的显示与隐藏

React开发(182):ant design table中 带线框的列表

React开发(179):ant design table中jsx风格写法

React开发(274):ant design table额外展开行