vaadin - 如何使用 litElement 在 vaading-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));
    }

标签： vaadinlit-element

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