带有 dataProvider 的 Vaadin-grid-filter 不起作用

如何解决带有 dataProvider 的 Vaadin-grid-filter 不起作用

我尝试通过 vaadin-grid-filter 过滤数据。当排序 dataProvider 正在刷新但当我尝试过滤器输入不起作用时...

    gridTemplate(columns: any){
        return html`
        <vaadin-grid
        id="grid" 
        .dataProvider=${this.dataProvider}
        >
        ${columns.map((column: Column) => html`<vaadin-grid-column width=${column.size} resizable path=${column.name} header="${column.alias}">
                <template class="header">
                    <vaadin-grid-sorter path=${column.name}>
                        <vaadin-grid-filter path="${column.name}">
                            <vaadin-text-field slot="filter" title="${column.alias}" placeholder=${column.alias} 
                            @input=${(e:any) => {console.log("Test INPUT")}}
                            @change=${(e: any) => (console.log("Test CHANGE"))}
                            @value-changed=${(e:any) => (console.log("Test VALUE-CHANGE"))}></vaadin-text-field>
                        </vaadin-grid-filter>
                    </vaadin-grid-sorter>
                </template>
            </vaadin-grid-column>`)}
    </vaadin-grid>`
    }

解决方法

如果您想为 vaadin-grid-filter 使用自定义文本字段，您必须重新启用 value 和 vaadin-text-field 之间的 vaadin-grid-filter 绑定。这可以使用模板中 Polymer 的绑定语法来完成：

<vaadin-grid-sorter path=${column.name}>

  <vaadin-grid-filter path="${column.name}"
                      value="[[value]]"> <!-- ? Here -->

    <vaadin-text-field slot="filter"
                       title="${column.alias}"
                       placeholder=${column.alias}
                       value="{{value}}"> <!-- ? and here -->
    </vaadin-text-field>

  </vaadin-grid-filter>

</vaadin-grid-sorter>