剖析 Ant Design

欧雷 发表于

糟粕

子组件限制

Select 组件限制子组件必须为 Select.OptionSelect.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;
      }
    }
  }
}

创作不易,若给你提供了价值,还请不吝欧雷充电

左为微信,右为支付宝;充电累计 ¥88 以上可在付款时备注或邮件告知昵称和需要被链接的网址,会列在「赞助」页。其他方式与具体规则请见「资助」。

本文采用知识共享署名-非商业性使用 4.0 国际许可协议,可自由转载、引用,但需署名作者并注明文章出处且不能用于商业用途。

目录