如何使用 litElement 在 vaadin-grid 行/单元格上挂起处理程序？

Question

我需要跟踪对某一行的点击并确定当前的点击，以及对某个单元格的点击，如何与 litElement 结合使用？

       <vaadin-grid .items ="${test_data}" theme="special-field">
          <vaadin-grid-column  path="company" header="Company"></vaadin-grid-column>
          <vaadin-grid-column  path="script" header="Script"></vaadin-grid-column>
          <vaadin-grid-column  path="stage" header="Stage"></vaadin-grid-column>
          <vaadin-grid-column  path="atributes" header="Atributes"></vaadin-grid-column>
        </vaadin-grid>


   test(event){
        console.log(event.target)
    }

我找到了这个用于行更改的解决方案，但也许还有更正确的方法以及如何监听单元格的更改

  firstUpdated() {
        const grid = this.shadowRoot.querySelector('vaadin-grid');
        grid.addEventListener('active-item-changed', (event) => this.test2(event, grid));
    }

Answer 1

<vaadin-grid> 已经有活动了。你只需要倾听它。

向 <vaadin-grid...> 添加 active-item-changed 的事件侦听器，如

<vaadin-grid
   id="grid"
   @active-item-changed=${this._activeItemChanged}...

然后写下你的方法：

_activeItemChanged(evt) {
  const grid = this.shadowRoot.getElementById('grid');
  const item = evt.detail.value;
  grid.selectedItems = item ? [item] : [];
  // Set info string.
  if (item) {
    this.dispatchEvent(
      new CustomEvent('record-selected', {
        detail: item,
        bubbles: true,
        composed: true,
      }),
    );
  } else {
    this.dispatchEvent(
      new CustomEvent('record-unselected', {
        detail: '',
        bubbles: true,
        composed: true,
      }),
    );
  }
}

有关详细信息，请参阅 https://vaadin.com/components/vaadin-grid

如何使用 litElement 在 vaadin-grid 行/单元格上挂起处理程序？

how to hang handlers on vaading-grid row / cell using litElement?

vaadin

lit-element