我正在使用 Vaadin 14.7.5,所以 vaadin-grid 5.9.0。
包含单个vaadin-grid
元素的单个vaadin-grid-tree-toggle
元素位于 Lit 元素内。
import {css, html, LitElement} from 'lit-element';
import {render} from "lit-html";
import '@vaadin/vaadin-grid';
import '@vaadin/vaadin-grid/vaadin-grid-column';
import '@vaadin/vaadin-grid/vaadin-grid-tree-column';
import '@vaadin/vaadin-grid/vaadin-grid-tree-toggle';
class ProjectTaskTreeElement extends LitElement {
static get properties() {
return {
project: {
attribute: false
}
};
}
constructor() {
super();
}
static get styles() {
return css`
:host {
display: block;
width: 100%;
}
:host([hidden]) {
display: none !important;
}
`;
}
render() {
return html`
<vaadin-grid id="tree"
.items="${this.project ? this.project.top_level_tasks : []}">
<vaadin-grid-tree-column header="Name" path="name" item-has-children-path="subtasks"></vaadin-grid-tree-column>
</vaadin-grid>
`;
}
}
customElements.define('project-task-tree', ProjectTaskTreeElement);
export {
ProjectTaskTreeElement
};
这是一个例子projects
:
{
"id": 30,
"name": "Test Project",
"archived": false,
"top_level_tasks": [
{
"id": 18,
"name": "1",
"complete": false,
"subtasks": [
{
"id": 19,
"name": "1.1",
"complete": false,
"subtasks": [],
"teammates": []
}
],
"teammates": []
}
],
"teammates": []
}
我希望这能正常工作。ArrayDataProviderMixin#_arrayDataProvider
应items
作为数据提供者处理。网格呈现良好,预期的根行折叠和展开。但是当我点击展开时,会抛出一个错误:
Uncaught InternalError: too much recursion
set http://localhost:8080/node_modules/@polymer/polymer/lib/mixins/properties-changed.js:167
_arrayDataProvider http://localhost:8080/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-array-data-provider-mixin.js:66
_loadPage http://localhost:8080/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-data-provider-mixin.js:347
ensureSubCacheForScaledIndex http://localhost:8080/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-data-provider-mixin.js:70
_loadPage http://localhost:8080/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-data-provider-mixin.js:364
_loadPage http://localhost:8080/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-data-provider-mixin.js:359
_arrayDataProvider http://localhost:8080/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-array-data-provider-mixin.js:75
properties-changed.js:167:51
我尝试过模板化一个vaadin-grid-column
元素,但发生了同样的错误:
<vaadin-grid-column>
<template class="header">Name</template>
<template>
<vaadin-grid-tree-toggle leaf="[[!item.subtasks.length]]"
expanded="{{expanded}}"
level="[[level]]">
[[item.name]]
</vaadin-grid-tree-toggle>
</template>
</vaadin-grid-column>