Antd table的expandedRowRender额外展开行以及注意事项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Antd table的expandedRowRender额外展开行以及注意事项相关的知识，希望对你有一定的参考价值。
参考技术A 像这样子，前面有个加号，点击额外展开子表格用的是expandedRowRender这个属性，值另外传一个子table组件进去就行
有个需求是加号的时候，页面上只允许有一个展开，即点击第一个加号展开后，再点击第二个加号，第一个要收缩回来，第二个子表格展开，antd默认的是，都能展开，现在要做成类似手风琴一样的效果，只能展开一个，
用expandedRowKeys，放在state中进行维护，比如说
那么就是展开第一行的子表格，并且这样设置了后，点击加号展不开了，因为表格的展开，受state中的expandedRowKeys值控制，不能点击展开了，要让他点击展开，又得用另外一个属性 onExpand
但是这里只有expanded，和record的参数，expanded表示这次点击是展开还是收缩，Boolean类型
record就是你tableSource的数据
应该在这里，onExpand的时候，setState,并且把行号，塞到数组里，但是没法获取行号
就先给tableSource的数据用forEach循环一下，每条数据额外加个属性rowKey，值为循环的index
这样子行号就等于record.rowKey,所以在onExpand里面
如果是点击减号收缩的话，那么这个onExpand的参数expanded，就会变成false，这里用if判断了一下，收缩，那就把expandedRowKeys清空
因为只能有一个展开，所以这个expandedRowKeys虽然是个数组，也只能放一条数据，那么收缩的时候，就是全都没有展开的情况，直接清空数组就行
以上是关于Antd table的expandedRowRender额外展开行以及注意事项的主要内容，如果未能解决你的问题，请参考以下文章