Ourai.WS共享

剖析 Ant Design

糟粕

子组件限制

Select 组件限制子组件必须为 Select.Option 或 Select.OptGroup：

子组件限制
子组件限制

Table 组件内容高度

要想实现内容区域高度撑满并滚动的效果，需要给 scroll 属性的 y 设置一个「固定值」，不能比较「智能」地计算。

常见的解决方案是用 JS 动态计算出容器实际需要的高度，但这样会令渲染性能下降，可以考虑用 CSS 去解决，把计算交给浏览器：

.ZoraDataTable {
  &-table {
    height: 100%;

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

      .ant-spin-container,
      .ant-table-container,
      .ant-table-container > .ant-table-body {
        display: flex;
        flex-direction: column;
      }

      .ant-table-fixed-header,
      .ant-table-container > .ant-table-body {
        flex-grow: 1;
      }

      .ant-table-pagination,
      .ant-table-container > .ant-table-header{
        flex-shrink: 0;
      }

      .ant-table-pagination {
        margin: 0;
        padding: 16px 0;
      }

      .ant-table-container > .ant-table-body {
        max-height: none !important;
        height: 0;
      }
    }
  }
}