0

我正在使用 lit-element 和 vaadin 网格，并且我正在尝试使用渲染器函数将数据返回到适当的 vaadin 列中。但是，当尝试返回 render() 方法时，它会将数据作为 [object object] 渲染到 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 网格列中，但 UI 中显示的值是 [object object. 我能够显示从 fetch 接收到的数据，因为我可以将其显示到不使用渲染器函数（名字和姓氏）的列中。任何帮助将不胜感激！

4

1 回答 1

0

引用 Thad 的评论：

我不明白你为什么会遇到问题。您的示例有效：http ://stackblitz.com/edit/grid-renderers?file=index.ts – 我所做的只是添加了 users 属性。

于 2019-09-30T18:44:21.693 回答