vaadin - 如何在父 lit-element 组件中挂钩数据网格事件?
问题描述
我想对放置在数据网格行中的元素启动的事件做出反应。Vaading data-grid 防止事件冒泡到包含网格的父组件。将按钮放置在为每一行呈现的网格列中,我无法从承载网格的组件中捕获单击或任何其他事件。
https://vaadin.com/components/vaadin-grid/html-examples中的示例依赖于 html 文件中附加的 js 挂钩。我正在使用 Lit-element 并尝试在 firstUpdated() 回调中做同样的事情。问题是,显然此时该表不可用。
<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>
我希望有日志并且没有任何事情发生,因为网格组件会阻止事件冒泡到我的组件。
尝试为 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 时,您应该使用渲染器
这是您的代码使用渲染器的外观
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);
}
}
在由 vaadin 团队成员之一创建的Glitch中,您可以在 LitElement 中看到这个以及更多 vaadin-grid 的功能
推荐阅读
- android - Android 9 中的致命错误:在屏幕之间切换时经常崩溃
- java - 无法解析我在 android studio 中的所有代码上的符号
- php - 尝试突出显示php中的某些单词时出现代码执行错误
- rust - Rust 中的迭代器类型
- amazon-web-services - 使用 url 访问 AWS 存储桶
- build-automation - 将新项目添加到 SharePoint 列表时,向匹配项目类别的用户发送电子邮件通知
- sql - 在当前行中,对代表上周(7 天)记录的行的数据求和
- bash - 创建一个运行带有用户定义参数的 sql 脚本的 sh 脚本
- python-3.x - 如何在类方法中使用 Python @click 命令装饰器?
- java - 排序时Java lambda抛出NPE