React Antd Table的expandedRowRender中嵌套Table宽度问题

470 阅读1分钟

Table 中,有个 expandable 可以配置表格展开功能

image.png

// 有问题的布局
<Table
    // 展开配置
    expandable={{
        // 通过 expandedRowKeys 来保证展开后再次查询,所有展开能缩回
        expandedRowKeys: expandedRowKeys,
        expandedRowRender: (record) => {
            return (
                <div>
                    <Table />
                </div>
            )
        },
    }}
/>

但是如果 expandedRowRender 嵌套的也是 Table ,放大浏览器界面,内部表格宽度会超出界面,导致界面出问题。
通过浏览器的 Elements 可以看到外层的 Tabletable-layout: auto; ,展开后的 Tabletable-layout: fixed;

image.png antd提供了一个 tableLayout 属性,外层 Table 设置 tableLayout="fixed" 即可解决这个问题

// 有问题的布局
<Table
    // 增加的配置
    tableLayout="fixed"
    // 展开配置
    expandable={{
        // 通过 expandedRowKeys 来保证展开后再次查询,所有展开能缩回
        expandedRowKeys: expandedRowKeys,
        expandedRowRender: (record) => {
            return (
                <div>
                    <Table />
                </div>
            )
        },
    }}
/>