antd pitfalls
8/21/2024

Table 在 flex 容器下自适应宽度,导致宽度溢出

.main .content .right{
  flex: auto;
  min-width: 0;
}

默认情况下,flex选项不会缩小低于他的最小内容尺寸(长单子的长度或固定尺寸元素),改变这个问题可以去设置min-wdith或min-height属性,具体可以参考4.5的flex选项的潜在最小尺寸。

默认最小尺寸是内容尺寸,所以导致溢出,直接设置为0就可以让最小尺寸低于内容尺寸来解决溢出问题。

github-issus

Tree 虚拟滚动横向滚动条

Tree 数据超大时,需要通过 height 开启虚拟滚动,优化性能。

但这会导致横向滚动失效,某中场景会出现内容显示不全的问题。

官方也明确表示开启虚拟滚动后会导致无法横向滚动,但我们可以通过 css 强制开启横向滚动。

.ant-tree-list-holder {
  /* 滚动槽 */
  &::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
    -webkit-box-shadow: none;
  }
  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    -webkit-box-shadow: none;
  }
 
  // 开启虚拟滚动时,适配横向滚动
  & > div {
    overflow: visible !important;
  }
}

Reference

issues