如果在使用 antdTable 组件时,将 expandable 属性设置为 true 并且同时设置 fixed 属性为 true 时,可能会导致页面出现滚动条。解决这个问题的方法有两种:

  1. 使用 CSS 调整表格的样式:可以通过自定义表格的样式,将表格的高度设置为固定值,并且设置 overflow-y: auto,这样就可以在表格内容超出指定高度时出现滚动条并解决页面滚动问题。例如:
.table-container {
  height: 400px;
  overflow-y: auto;
}
<div className="table-container">
  <Table
    ...
    expandable={{
      expandedRowRender: (record) => <p>{record.description}</p>,
    }}
    scroll={{ y: 300 }}
  />
</div>
  1. 使用 Tablescroll 属性:Table 组件提供了 scroll 属性,可以用来设置表格的滚动区域。通过设置 scroll 属性的 y 值为固定高度,可以让表格在内容超出指定高度时出现滚动条并解决页面滚动问题。例如:
<Table
  ...
  expandable={{
    expandedRowRender: (record) => <p>{record.description}</p>,
  }}
  scroll={{ y: 300 }}
/>

以上两种方法都可以根据具体需求进行选择,根据页面的布局和样式来决定使用哪种方法来解决滚动问题

antd Table expandable 加入fixedtrue页面出现滚动条怎么解决

原文地址: https://www.cveoy.top/t/topic/iM21 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录