在 Vaadin-grid 聚合物 2 中使用行详细信息时出现双行

Question

我尝试在用 polymer 2 编写的 webcomponnet 中实现行数据。为此，我使用示例：https://vaadin.com/components/vaadin-grid/html-examples/grid-row-details-demos#row-details-with-polymer-template

我尝试以两种方式显示行详细信息：_onActiveItemChanged end expanded。

当我使用它时，线条增加了一倍。

如何显示我的模板？

我的代码

<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];
}

但是，如果您想用复选框打开详细信息，则需要将 checked 属性绑定到 detailsOpened:

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

小记：

聚合物组件将所有具有 id 的元素绑定到一个 $ 对象，因此您可以使用 this.$.grid 而不是 this.$$("#grid")（如我上面的代码所示） .

在 Vaadin-grid 聚合物 2 中使用行详细信息时出现双行

Duble rows when use row details in Vaadin-grid polymer 2

polymer

vaadin

web-component

vaadin-grid