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)}}     // 这个是用来请求子表格的后台数据方法，上一篇文章中有介绍到

        onExpandedRowsChange:(expandedRows) => expandRows(expandedRows)    // 展开的行变化时触发

        expandedRowkeys: expandedRowKeys   // 展开的行，控制属性

        expandedRowRender: () => expandedRowRender()   // 额外的展开行(就是我们的子表格)

    }}

/>

剩下的就是各个属性对应的函数处理了

const onExpand = (expanded,record) => {

    //  请求后台接口处理数据

}

const expandedRowRender = () => {

    // 渲染我们的子表格

}

const expandRows = (rows) => {

    // 这里可以打印一下rows看下是什么 --------点开是['',1]   ['',2]的数组 ，最后一个是我们当前展开的行，我们最后set一个['',当前展开行的下标]到expandedRowKeys就可以实现 ‘点击新的子表格收起原展开的子表格’ 这个功能了

    const arrTemp = ['']

    setExpandedRowKeys(arrTemp.concat(row[row.length - 1]))

}

都是API里边的东西，平常多看一下大家应该都可以找到解决方法的~~

react小白上路，如果有哪里不对，希望各位大佬多多指出 (0_0)~~~~~~