如何在 vaadin-grid 中设置标题样式

Question

我正在使用带有两个标题行的 vaadin-grid：一个用于分组列的标题，另一个用于列的实际标题。

我想要分组列之间的垂直分隔符。

现在，我在每个组的第一列使用类名生成器来添加左边框：

grid.addComponentColumn(...)
.setHeader("My column")
.setClassNameGenerator(line -> "first-group-col")

通过 JsImport 包含一个 dom 模块：

import '@polymer/polymer/lib/elements/custom-style.js';
const documentContainer = document.createElement('template');

documentContainer.innerHTML = `
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
    <template>
        <style>
            .first-group-col {
                border-left: 1px solid red;
            }
         </style>
    </template>
</dom-module>`;

document.head.appendChild(documentContainer.content);

但是类 '.first-group-col' 没有出现在标题行上，而且我看不到如何在标题单元格上添加类。

那么如何在标题行的某些列上添加边框？

我的网格中的列数是动态的，所以我不能只使用 CSS 在第 n 列上添加边框。

我正在使用 Vaadin 14。

问候，

阿诺

Answer 1

我在第一列使用类名生成器

类名生成器适用于正文单元格，但不适用于标题单元格。

您可以使用以下内容设置标题样式，假设您有 Grid，grid.addClassName("my-grid");

        :host(.my-grid) [part="row"] [part~="header-cell"]{
            padding-left: 3px;
            color:brown;
            background:var(--lumo-primary-color);
            align-items:flex-start;
        }

您可以将上面的 css 片段添加到例如在你的 frontend/styles 文件夹中的 gridheader.css 文件，然后导入它

@CssImport(value = "./styles/gridheader.css", themeFor="vaadin-grid")