零基础TypeScript，求基于Hilla View的简易树形网格示例

你不用纠结官网的LitElement示例——Hilla的View本身就是基于LitElement封装的，直接在View类里使用TreeGrid组件就行，下面是符合你需求的完整示例：

1. 完整代码实现 #

import { View } from '@hilla/runtime';
import '@vaadin/tree-grid';
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';

// 定义树形数据的结构
interface GroceryItem {
  name: string;
  type?: string;
  children?: GroceryItem[];
}

@customElement('grocery-view')
export class GroceryView extends View {
  // 模拟的食品分类树形数据
  private groceryData: GroceryItem[] = [
    {
      name: '水果',
      children: [
        { name: '苹果', type: '温带水果' },
        { name: '香蕉', type: '热带水果' },
        { name: '草莓', type: '浆果' }
      ]
    },
    {
      name: '蔬菜',
      children: [
        { name: '西兰花', type: '十字花科' },
        { name: '胡萝卜', type: '根茎类' },
        {
          name: '绿叶菜',
          children: [
            { name: '生菜', type: '叶用莴苣' },
            { name: '菠菜', type: '藜科' }
          ]
        }
      ]
    }
  ];

  render() {
    return html`
      <h2>食品分类树形网格</h2>
      <vaadin-tree-grid .items="${this.groceryData}">
        <!-- 树形列：带展开/折叠按钮，显示名称 -->
        <vaadin-tree-grid-column
          path="name"
          header="名称"
          auto-width
        ></vaadin-tree-grid-column>
        <!-- 普通列：显示类型信息 -->
        <vaadin-grid-column
          path="type"
          header="类型"
          auto-width
        ></vaadin-grid-column>
      </vaadin-tree-grid>
    `;
  }
}

2. 关键说明 #

• 必须导入@vaadin/tree-grid组件，Hilla默认不会自动引入这个组件
• @customElement('grocery-view')是注册自定义元素的必填装饰器，这样你可以在路由配置或者其他页面中引用这个视图
• TreeGrid默认会识别数据里的children字段作为子节点，如果你的后端数据子节点字段不是children，可以通过itemHasChildren和getChildren属性自定义节点识别逻辑
• 如果需要从后端获取数据，只需要把groceryData替换成从Hilla Service获取的树形数据即可，比如在connectedCallback生命周期里调用后端接口加载数据

3. 必要依赖检查 #

如果你的项目里没有安装TreeGrid包，在终端执行：

npm install @vaadin/tree-grid

内容的提问来源于stack exchange，提问作者Melting Turret