使用 Lit 连接网格列在 vaadin hilla 中不可用？

Question

在 vaadin hilla 中，分组列标题工作正常，而在一个标题下加入列则不起作用。 vaadin 14 可以选择加入 2 个纵队，这是希拉所缺少的。如果有人有任何解决方案吗？

 private static Grid<String> createGrid() {
        Grid<String> grid = new Grid<>();
        grid.setId("grid1");
        grid.addThemeVariants(GridVariant.LUMO_COLUMN_BORDERS);
        grid.appendHeaderRow();
        List<Grid.Column<String>> columns = addColumns(grid);
        HeaderRow.HeaderCell header = grid.prependHeaderRow()
                .join(columns.get(0), columns.get(1));
        header.setText("first + second");
        grid.prependHeaderRow()
                .join(columns.toArray(new Grid.Column[columns.size()]))
                .setText("joined");

        grid.setItems("1", "2", "3");
        return grid;

Answer 1

vaadin-grid

中没有直接支持连接表体单元，甚至在 Vaadin 14 版本中也没有。只有加入标题单元格的选项。

如果你想在body cell中显示复杂的数据，例如连接多个属性的数据，需要使用渲染器

import { columnBodyRenderer } from "@vaadin/grid/lit.js"

在

vaadin-grid

中使用它

<vaadin-grid ...>
   <vaadin-grid-column
      ${columnBodyRenderer(contactRenderer, [])}
   ></vaadin-grid-column>
...
</vaadin-grid>

并定义渲染函数

const contactRenderer: GridColumnBodyLitRenderer<Contact> = (contact) => {
    return html`
       <span>
          ${contact.firstName} ${contact.lastName}
       </span>
    `;
  };