解决Naive UI使用了固定列和scroll-x后,数据表格撑开容器

其实这个问题的解决方法是共通的,不多说,先看修复后的例子:

解决Naive UI使用了固定列和scroll-x后,数据表格撑开容器_第1张图片解决Naive UI使用了固定列和scroll-x后,数据表格撑开容器_第2张图片

顶部的蓝色为30vw宽度的容器,下方是一个Naive UI的标签页,里面放了一个数据表格。

可以看到,整个标签页Tab和上方最简单的30vw容器的尺寸是一致、计算正确的。 

那么我们遇到了什么问题呢,请看图:

解决Naive UI使用了固定列和scroll-x后,数据表格撑开容器_第3张图片

我们可以发现,在100%页面比例下,表格撑出了容器。

而此时我们容器设置的max-width :100 %,并不起作用。

具体的原因非常复杂,涉及到多层嵌套(NaiveUI大量使用了flex布局),导致出现撑开的问题。

解决方法是:

父容器(这里我是n-tab-pane)启用flex布局,并使用经典做法:flex1+width0大法:

    
      
        
      
    

你可能感兴趣的:(ui,javascript,前端)