Я использую lit-element и vaadin grid, и я пытаюсь использовать функции рендерера, чтобы возвращать данные в соответствующий столбец vaadin. Однако при попытке вернуть метод render () он отображает данные в столбце сетки vaadin как [объект объекта].
firstUpdated() {
super.firstUpdated();
fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
.then(r => r.json())
.then(data => {
this.users = data.result;
});
}
render() {
return html`
<style>
.address {
white-space: normal;
}
vaadin-grid-filter {
display: flex;
}
vaadin-text-field {
max-width: 100%;
}
</style>
<vaadin-grid .items="${this.users}" .rowDetailsRenderer="${this.rowDetailsRenderer}" column-reordering-allowed multi-sort>
<vaadin-grid-column width="50px" flex-grow="0" header="#" .renderer="${this.indexRenderer}" resizable></vaadin-grid-column>
<vaadin-grid-filter-column path="firstName" header="First name"></vaadin-grid-filter-column>
<vaadin-grid-sort-column path="lastName" header="Last name"></vaadin-grid-sort-column>
<vaadin-grid-column width="150px" header="Repitch" .renderer="${this.buttonRenderer}"></vaadin-grid-column>
<vaadin-grid-column width="150px" path="email" .headerRenderer="${this.emailHeaderRenderer}"></vaadin-grid-column>
</vaadin-grid>
`;
}
buttonRenderer(root, column, rowData) {
render(
html`
<button>Test</button>
`,
root
);
}
indexRenderer(root, column, rowData) {
render(
html`
<div>${rowData.index}</div>
`,
root
);
}
Я ожидаю отобразить $ {rowData.index} в первом столбце сетки vaadin, но в пользовательском интерфейсе отображается значение [объект объекта. Я могу показать данные, полученные из выборки, поскольку я могу показать их в столбцах, которые не используют функции рендеринга (имя и фамилия). Любая помощь будет оценена!
users
. (Кстати, super.firstUpdated () не требуется, но это не вызывает проблем.) - person Thad   schedule 11.08.2019