Question

我正在使用lit-element和vaadin网格，并且尝试使用renderer函数以便将数据返回到适当的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。我可以显示从提取中获取的数据，因为我可以将其显示到不使用渲染器功能的列中（名字和姓氏）。任何帮助将不胜感激！

Answer 1

引用Thad的评论：

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

如何使我的vaadin渲染器按预期返回我的渲染功能？

1 个答案: