ant-design嵌套子表格实现每次只展开一个子表格（点击新的子表格收起原展开的子表格）

又遇到问题，记录一下吧，希望给同踩坑的小白一些帮助

首先功能需求：点击新的子表格收起原展开的子表格

解决问题的关键点：重新set  expandedRowKeys的值

这个解决问题的点大家都能想到，主要是在什么时候去set这个值

 

下边是API里边的描述，我们使用这个参数就可以解决问题了

onExpandedRowsChange

展开的行变化时触发

function(expandedRows)

expandedRowKeys

展开的行，控制属性

string[]

 

首先初始设置一个expandedRowKeys的初始值，我这里用的hook

const [expandedRowKeys，setExpandedRowKeys] = useState([''])     //  这里注意一下expandedRowKeys需要的时string[],我这里是默认全部收起的

然后是table组件中

<Table

    dataSource={ {datasource}}

    expandable={ {

        onExpand={ {(expanded,record)=>onExpand(expanded,record)}}     // 这个是用来请求子表格的后台数据方法，上一篇文章中有介绍到

<