javascript - 使用按钮选择 `vaadin-grid` 行数据

Question

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">

  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">First Name</template>
    <template>[[item.name.first]]</template>
  </vaadin-grid-column>
</vaadin-grid>

使用activeItem模式，单击一行时可以选择vaadin-grid行数据。

有没有办法通过按钮操作来调用它？

也许通过从父节点选择一个属性？

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">

  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">First Name</template>
    <template><paper-button on-tap="selectRowData">Select</paper-button</template>
  </vaadin-grid-column>
</vaadin-grid>

Answer 1

您可以通过获取行索引并从数据源中选择行来使用按钮选择行数据。

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

 <vaadin-grid-column>
   <template class="header">First Name</template>
   <template>
     <paper-button id="[[index]] on-tap="selectRowData">Select</paper-button</template>
   </vaadin-grid-column>
 </vaadin-grid>

...

selectRowData(e) {
  let row = this.data[e.detail.sourceEvent.target.id];
  // do something with row data
}