首先了解比较重要的几个属性
: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
});