星期
React&antd之table展开行
首页 > 我的学习历程    作者:月丶   2018年8月22日 15:28 星期三   热度:8152°   百度已收录  
时间:2018-8-22 15:28   热度:8152° 

首先了解比较重要的几个属性

                                          :expandedRowRender,此属性定义table展开行的内容,类型Function(record, index, indent, expanded):ReactNode。

                                          :expandedRowKeys,此属性可以选择可展开的行类型string[],(即由字符串组成的数组,如["11"],若传入的值为字符串,如"10",则会产生警告,实际应用时,10会被自动切割成为:["1","0"],则会同时展开三行,0,1,10行)

                        :rowKey,此属性为table的行的key值,即可作为上面expandedRowKeys的值使用,类型string|Function(record):string

                        :expandRowByClick,此属性控制是否可以通过点击行来控制展开,类型:boolean


思路:初始化expandedRowKeys的值为空,此时所有行都可展开,设置rowkey为本行数据的key值,当点击行时,更新状态将当前行的key传给初始化的expandedRowKeys的值。此时便会只展开当前行,其他展开行会自动收起。更新状态时注意:

const key = [];
key.push(record.key);
this.setState({
expandRowkey: key
});

二维码加载中...
本文作者:月丶      文章标题: React&antd之table展开行
本文地址:http://silver.eleuu.com/?post=15
版权声明:若无注明,本文皆为“月丶”原创,转载请保留文章出处。

返回顶部    手机版本    会员注册   
版权所有:月丶    博主: 月丶    团队首页电子乌托邦  博客框架:emlog   蜀ICP备18008322号   
  
//音乐播放器