polymer - 在 Vaadin-grid polymer 2 中使用行详细信息时双行

Question

我尝试在用 polymer 2 编写的 webcomponnet 中实现行数据。为此，我使用示例:https://vaadin.com/components/vaadin-grid/html-examples/grid-row-details-demos#row-details-with-polymer-template
我尝试以两种方式显示行详细信息:_onActiveItemChanged 结束扩展。
当我使用它时，线条加倍了。
如何显示我的模板？
我的代码

<link rel="import" href="./bower_components/vaadin-button/vaadin-button.html" />
<link
  rel="import"
  href="./bower_components/vaadin-text-field/vaadin-text-field.html"
/>
<link
  rel="import"
  href="./bower_components/vaadin-checkbox/vaadin-checkbox-group.html"
/>
<link
  rel="import"
  href="./bower_components/vaadin-combo-box/vaadin-combo-box.html"
/>
<link
  rel="import"
  href="./bower_components/vaadin-checkbox/vaadin-checkbox.html"
/>
<link rel="import" href="./bower_components/vaadin-grid/vaadin-grid.html" />
<link
  rel="import"
  href="./bower_components/vaadin-grid/vaadin-grid-column.html"
/>

<link
  rel="import"
  href="./bower_components/paper-checkbox/paper-checkbox.html"
/>

<dom-module id="grid-wraper">
  <template>
    <style>
      :host {
        display: block;
      }
      .details {
        padding: 10px;
        margin: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
        font-size: 20px;
      }

      img {
        width: 80px;
        height: 80px;
      }
    </style>

    <div class="card card-scale-anim">
      <div class="card-titleBlue">
        <iron-icon class="icon-user" icon="account-circle"></iron-icon>
        <h2 class="title">Lista użytkowników e-usług</h2>
      </div>
      <div class="org-users-table">
        <vaadin-grid
          class="users-grid"
          id="grid"
          height-by-rows
          data-provider="[[_gridDataProvider]]"
          style="height: auto"
          selected-items="{{_selectedItems}}"
          active-item="{{_activeUser}}"
          on-active-item-changed="_onActiveItemChanged"
        >
          <template class="row-details">
            <div class="details">
              <img src="[[item.picture.large]]" />
              <p>Hi! My name is [[item.name]]!</p>
            </div>
          </template>

          <vaadin-grid-column resizable width="100px">
            <template>[[item.name]]</template>
          </vaadin-grid-column>

          <vaadin-grid-column width="100px">
            <template class="header"></template>
            <template>
              <paper-checkbox
                aria-label$="Show Details for [[item.name]]"
                checked="{{expanded}}"
                >Show Details</paper-checkbox
              >
            </template>
          </vaadin-grid-column>
        </vaadin-grid>
      </div>
    </div>
  </template>

  <script>
    class GridWraper extends Polymer.Element {
      static get is() {
        return "grid-wraper";
      }

      static get properties() {
        return {
          dataProvider: { type: Function, notify: true },
        };
      }

      _onActiveItemChanged(e) {
        console.log("Active item", e);
        this.$$("#grid").expandedItems = [e.detail.value];
      }

      $$(selector) {
        return this.shadowRoot.querySelector(selector);
      }

      ready() {
        super.ready();
        Polymer.RenderStatus.afterNextRender(this, function () {});
      }
    }

    window.customElements.define(GridWraper.is, GridWraper);
  </script>
</dom-module>

Answer 1

如果您想在事件更改时展开项目(即当用户单击该行时)，那么您的 _onActiveItemChanged方法应该使用 Grid 的 detailsOpenedItems属性如下:

_onActiveItemChanged(e) {
  this.$.grid.detailsOpenedItems = [e.detail.value];
}

但是，如果要使用复选框打开详细信息，则需要绑定(bind) checked归因于 detailsOpened :

<paper-checkbox aria-label$="Show Details for [[item.firstName]]" checked="{{detailsOpened}}">Show Details</paper-checkbox>

一个小提示:
polymer 组件用 id 绑定(bind)所有元素到 $对象，而不是 this.$$("#grid") ，您可以使用 this.$.grid (如我上面的代码所示)。