在 Table
中,有个 expandable
可以配置表格展开功能
// 有问题的布局
<Table
// 展开配置
expandable={{
// 通过 expandedRowKeys 来保证展开后再次查询,所有展开能缩回
expandedRowKeys: expandedRowKeys,
expandedRowRender: (record) => {
return (
<div>
<Table />
</div>
)
},
}}
/>
但是如果 expandedRowRender 嵌套的也是 Table
,放大浏览器界面,内部表格宽度会超出界面,导致界面出问题。
通过浏览器的 Elements
可以看到外层的 Table
的 table-layout: auto;
,展开后的 Table
的 table-layout: fixed;
antd提供了一个 tableLayout
属性,外层 Table
设置 tableLayout="fixed"
即可解决这个问题
// 有问题的布局
<Table
// 增加的配置
tableLayout="fixed"
// 展开配置
expandable={{
// 通过 expandedRowKeys 来保证展开后再次查询,所有展开能缩回
expandedRowKeys: expandedRowKeys,
expandedRowRender: (record) => {
return (
<div>
<Table />
</div>
)
},
}}
/>