如何在父照明元素组件中挂钩数据网格事件? [英] How to hook data-grid events in parent lit-element component?

问题描述

我想对放置在数据网格行中的元素启动的事件做出反应.Vaading 数据网格可防止事件冒泡到包含网格的父组件.将按钮放置在为每一行呈现的网格列中，我无法从托管网格的组件中捕获单击或任何其他事件.

I want to react on events started by elements placed in the data-grid rows. Vaading data-grid prevents events from bubbling up to the parent component containing the grid. Having buttons placed in the grid column rendered for each row I cannot catch the click or any other event from the component that hosts the grid.

来自https://vaadin.com/components/vaadin-grid/的示例html-examples 依赖于 html 文件中附加的 js 钩子.我正在使用 Lit-element 并尝试在 firstUpdated() 回调中做同样的事情.问题是显然此时表不可用.

The examples from https://vaadin.com/components/vaadin-grid/html-examples are relying on js hooks being attached in the html file. I am working with Lit-element and trying to do the same at firstUpdated() callback. The problem is that apparently at this point the table is not available.

<vaadin-grid id="test" .items=${this.data} theme="compact">
    <vaadin-grid-column width="40px" flex-grow="0">
        <template class="header">#</template>
        <template>
            <vaadin-button style="font-size:10px;" theme="icon" focus-target @click="${(e) => { console.log(e) }}">
                <iron-icon icon="icons:create"></iron-icon>
            </vaadin-button>
        </template>
    </vaadin-grid-column>
</vaadin-grid>

我希望有日志，但没有任何反应，因为网格组件会阻止事件冒泡到我的组件.

I expected to have the log and nothing happens as the grid component prevents event from bubbling up to my component.

尝试为 vaadin-grid-column 实现渲染器属性的代码:

The code that tries to implement renderer property for vaadin-grid-column:

import { LitElement, html, css } from 'lit-element'
import {render} from 'lit-html';

import '@vaadin/vaadin-grid/vaadin-grid.js'
import '@vaadin/vaadin-grid/vaadin-grid-filter-column.js'
import '@vaadin/vaadin-grid/vaadin-grid-sort-column.js';
import '@vaadin/vaadin-grid/vaadin-grid-filter.js';
import '@vaadin/vaadin-grid/vaadin-grid-sorter.js'

export default class MyClass extends LitElement {
    static get properties () {
        return {
            data: { 
                type: Array,
                hasChanged: () => true
            },

        }
    }

    get grid() {
        return this.shadowRoot.querySelector('vaadin-grid');
    }

    constructor () {
        super()
        this.data = []//is being assigned from super as a property to a custom element 
    }
    render () {
        return html`
            <vaadin-grid id="test" .items=${this.data}>
                <vaadin-grid-column .renderer=${this.columnRenderer} header="some header text"></vaadin-grid-column>
            </vaadin-grid>
        `
    }

    columnRenderer(root, column, rowData) {
        render(html`test string`, root);
    }
}
window.customElements.define('my-elem', MyClass)

推荐答案

在基于 LitElement 的组件中使用 vaadin-grid 时，您应该使用 渲染器

When using vaadin-grid inside LitElement-based components you should use renderers

这是您的代码使用渲染器的样子

Here's how your code would look using renderers

import {LitElement, html} from 'lit-element';
// you need lit-html's render function
import {render} from 'lit-html';

class MyElement extends LitElement {
  // we'll just assume the data array is defined to keep the sample short
  render() {
    return html`
      <vaadin-grid id="test" .items=${this.data} theme="compact">
        <vaadin-grid-column width="40px" flex-grow="0" .renderer=${this.columnRenderer} .headerRenderer=${this.columnHeaderRenderer}></vaadin-grid-column>
      <vaadin-grid>
    `;
  }
  columnHeaderRenderer(root) {
    render(html`#`, root);
    // you could also just do this
    // root.textContent = '#'
    // or actually just use the column's header property would be easier tbh
  }
  columnRenderer(root, column, rowData) {
    render(
      html`
        <vaadin-button style="font-size: 10px;" theme="icon" focus-target @click="${(e) => { console.log(e) }}">
          <iron-icon icon="icons:create"></iron-icon>
        </vaadin-button>
      `, root);
  }
}

您可以在此 Glitch 由 vaadin 团队成员之一创建

You can see this and more of vaadin-grid's features in action in LitElement in this Glitch created by one of the vaadin team members

这篇关于如何在父照明元素组件中挂钩数据网格事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！