自定义Vaadin Grid组件单元格内容为空问题咨询

问题原因 #

Vaadin Grid内部仅会自动识别<vaadin-grid-column>标签作为表格列的配置载体。你自定义的TestVaadinGridColumn虽继承了GridColumn类，但组件标签名为test-vaadin-grid-column，不在Grid预设的列识别范围内，导致Grid无法解析这些自定义列的path属性，最终单元格内容为空。

解决方案 #

方案1：让自定义Grid识别自定义列 #

在TestVaadinGrid类中，通过监听子元素变化，手动将自定义列纳入Grid的列管理体系：

import { Grid, GridColumn } from '@vaadin/grid';
import { customElement, observeChildren } from '@vaadin/component-base/src/decorators.js';

@customElement('test-vaadin-grid')
export class TestVaadinGrid extends Grid {
  // 监听自定义列子元素的变化
  @observeChildren({ selector: 'test-vaadin-grid-column' })
  handleCustomColumnsChange(columns: TestVaadinGridColumn[]) {
    // 清空现有列配置
    this.removeAllColumns();
    // 将自定义列逐个添加到Grid
    columns.forEach(column => this.addColumn(column));
  }
}

@customElement('test-vaadin-grid-column')
export class TestVaadinGridColumn extends GridColumn {}

修改后，Grid会正确识别自定义列，解析path属性并渲染对应单元格内容。

方案2：仅自定义Grid，复用原生列组件 #

如果无需对列组件做扩展，直接使用原生<vaadin-grid-column>配合自定义Grid即可：

<test-vaadin-grid .items="${items}">
     <vaadin-grid-column path="firstName"></vaadin-grid-column>
     <vaadin-grid-column path="lastName"></vaadin-grid-column>
     <vaadin-grid-column path="email"></vaadin-grid-column>
     <vaadin-grid-column path="profession"></vaadin-grid-column>
</test-vaadin-grid>

该方式无需额外代码，直接复用原生列的全部功能，同时保留自定义Grid的扩展能力。

内容的提问来源于stack exchange，提问作者Rajen Bedia