526互联

【antd】table组件scroll滚动设置100%无法滚动的解决办法

发布时间 2023-06-01 15:03:33作者: 维多利亚的巴黎世家
<div className="document-left-body">
          <Table
            columns={tableColumns}
            dataSource={serchData}
            pagination={false}
            scroll={{ y: `calc(${100}% - ${80}vh)` }}
          ></Table>
</div>

直接设置是无法进行滚动的

当元素层级嵌套比较深的时候，设置该属性并不能得到应有的效果。其实问题在于该元素的父级元素，当父级元素没有设置高度时，子元素的该属性并不会出现效果。

所以，当要设置height:100%这个属性时，该元素的所有嵌套的父元素都必须设置高度，或者height:100%属性。

 

给表格的所有父级都添加height属性就可以实现表格滚动

.document-left-body {
      flex: 100;

　　　 .ant-table-wrapper,
      .ant-spin-nested-loading,
      .ant-spin-container,
      .ant-table,
      .ant-table-fixed-header,
      .ant-table-container {
        height: 100%;
      }
}