月丶
React&antd之table展开行
2018-8-22 月丶


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



                                          :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


});



发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容