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

转载于:https://www.cnblogs.com/aloehui/p/9007418.html

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

Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
html table 合并单元格分页,element table组件合并单元格
合并单元格,如果situation 一致,则合并 getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组:spanArr是一个空的数组,用于存放每一行记录的合并数:po ...
使用ant design vue 中table组件运行时not found: Error: Can't resolve 'reqwest' in 'D:\vue\antd-demo01\src\com
最近使用table时按照官网api使用table报了上面这个错误 1.只需要安装无法找到文件就可以正常运行了 2.命令行cd进入项目文件 3.运行npm install --save reqwest ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
html表格怎么纵向合并单元格,在html中表格如何合并单元格
在html中表格如何合并单元格发布时间:2020-04-28 10:55:12 来源:亿速云阅读:777 作者:小新这篇文章主要为大家详细介绍了在html中表格如何合并单元格,文中示例代码介绍的 ...
Excel中如何批量合并单元格
Excel中如何批量合并单元格方法/步骤 1.1 如图所示是我们的演示数据与预期达到的效果. 1.首先,选中数据. 2.依次点击[数据]-[分类汇总] 3.弹出如下对话框,将[分类字段]设置为&qu ...
Ant table表格合并单元格使用
Ant 合并单元格+覆盖样式项目需求: 最后一列用来展示详情,表格左侧点击行切换:要求选中行的样式和详情信息用一个边框凸显出来结果如下: 切换效果展示如下: 实现过程: 在ant合并单元格demo ...
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头.vue-split-ta ...
layui中table监听单元格_最全总结 | 聊聊 Python 办公自动化之 PPT（中）
点击上方 "AirPython",选择 "加为星标" 第一时间关注 Python 技术干货! 1. 前言上一篇文章简单地介绍了 PPT 的文档结构,并使用 p ...

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

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

最新文章

热门文章