在Vaadin网格中选择Row

Question

我正在使用vaadin网格组件来显示，编辑和删除表中的记录。我在我的vaadin网格行中使用html输入来保存文本，并在readonly和editable之间切换，具体取决于用户是否正在编辑行。代码如下所示：

<vaadin-grid-column width="50%">
  <template class="header">
    Description
  </template>
  <template>
    <input id="desc" class="input-row" value="[[item.Description]]" on-input="_storeDesc" readonly$="[[!_isEditing(editing, item)]]"></input>
  </template>
</vaadin-grid-column>

我遇到的问题是我想在vaadin网格中启用行选择。当我启用它时，该行仅在用户单击不包含html输入的行的一部分时注册为选中。如果用户单击输入，则网格将不会注册活动项目已更改。

如果用户点击白色部分（html输入），网格将不会注册选择中的更改，但是如果他们单击将注册的蓝色部分。这有解决方法吗？我可以在输入标签上放置什么来确保正确选择行吗？

TIA

Answer 1

如果你在vaadin-grid行中有一个子元素来捕获click事件，那么行选择将受到影响。
来自vaadin-grid的{​​{1}}演示文稿的注释 -

  

单击单元格内的子元素会激活该项目，除非   之一：

     

  
• 点击的子项是一个可聚焦的元素，例如selection，a   <input>，或具有tabindex属性。
  
  
• 点击的子项会阻止点击事件的默认操作。
  
  
• 点击的子项会停止点击事件的传播。
  

因为，您计划使行子元素可编辑，实现这一点的一种方法是以编程方式根据<button>子元素中的click事件选择行。

所以稍微更新的伪代码就是 -

input

请注意，<!-- template code --> <vaadin-grid-column width="50%" active-item="{{_activeItem}}"> <template class="header"> Description </template> <template> <input id="desc" class="input-row" value="[[item.Description]]" item="[[item]]" on-click="_inputClicked" on-input="_storeDesc" readonly$="[[!_isEditing(editing, item)]]"></input> </template> </vaadin-grid-column> //set the row selected in which the input was clicked for editing _inputClicked(e) { const item = e.currentTarget.item; this.$.dataGrid.selectedItems = item ? [item] : []; } 元素必须引用input以编程方式设置行选择。

您可以查看更多vaadin网格选择模式here的示例。

Answer 2

如果您不需要允许用户在只读时选择文本，则可以在读取时为其添加pointer-events: none;。

除了<input>元素之外，您还可以选择明文元素，这取决于只读状态。