vaadin网格表的列宽度与CSS

Question

在我的 Polymer 2.0 项目中，我使用了 vaadin-grid＃3.0.2 。有一个包含大量数据的网格-20多个列，因此在div内具有溢出Y滚动。由于数量众多，列宽度在网格内部减小。父div具有display: flex属性，因此列的宽度是自动生成的。 我们可以设置CSS列的最小宽度吗？或可以使用CSS控制它吗？

在此处无法重现问题代码，因为数据来自外部服务器（Oracle VM VirtualBox）。

以下是HTML中使用的代码：

<vaadin-grid class="projectworksheet" name="worksheet" items="[[projectData]]" page-size="10"></vaadin-grid>

这是渲染网格的屏幕快照，我认为<vaadin-grid-table id="scroller">下的vaadin-grid自动生成了#shadow-root，这就是为什么我无法使用CSS控制列min-width的原因。

Answer 1

单独使用CSS不能跨越阴影dom边界，这意味着您将无法从vaadin-grid组件外部设置宽度，除非它们提供了mixin或css变量。

但是，您可以使用javascript访问shadowDom中的元素并设置其CSS属性。例如：document.querySelector('vaadin-grid.projectworksheet').shadowRoot.querySelector('vaadin-grid div.col').style.width = '100px'