Question

我正在使用vaadin数据网格和dom-repeat模板，以便创建a grid with dynamic columns。我也在网格的页脚中使用过滤器。

我需要在该过滤器的输入文本字段中添加占位符文本，因此我必须设置输入标记。问题的一部分是value。在Vaadin网格documentation中，这是一个静态命名的变量，等于列名称，前面加_filter，然后附加文本字段的值（::input ）。

如果我要将其硬编码为_inputHost::input，它将绑定到＆＃34; host＆＃34;的动态生成属性。列，但仅适用于此列。它还会导致分类中断。

在下面的示例中，我使用了_filterXXXXXXX::input。我该怎么用呢？

HTML：

<template>
   <vaadin-grid id="grid" data-provider="[[dataProvider]]" size= "[[size]]">
      <template is="dom-repeat" items="[[columns]]" as="column">
        <vaadin-grid-column>
          <template class="header">[[column]]</template>
          <template>[[get(column, item)]]</template>
          <template class="footer">
            <vaadin-grid-filter aria-label="[[column]]" path="[[column]]" value="[[_filterColumn]]">
              <input placeholder="[[column]]" slot="filter" value="{{_filterXXXXXXX::input}}" focus-target>
            </vaadin-grid-filter>
          </template>
        </vaadin-grid-column>
      </template>
   </vaadin-grid>
</template>

JS：

this.dataProvider = function(params, callback) 
{
    var items = [];
    items.push ({ID:100, host:"foo.com", rank:5});
    items.push ({ID:101, host:"bar.com", rank:8});
    items.push ({ID:102, host:"meh.com", rank:15});
    this.size = items.length;
    callback(items);
}
this.columns = [];
this.columns.push ("ID", "host");

Answer 1

首先，如果我错了，我从不使用vaadin-grid。

我认为_filterXXXXXXX可以是任何变量，但如果使用普通字符串，变量将附加到主机，因此您应该使用另一个变量。我认为最简单的方法之一是使用item变量（在您的情况下为column），例如item.filter。

所以你的代码应该是

<vaadin-grid-filter aria-label="[[column]]" path="[[column]]" value="[[column.filter]]">
  <input placeholder="[[column]]" slot="filter" value="{{column.filter::input}}" focus-target>
</vaadin-grid-filter>

当然，我没有对此进行测试。

Vaadin网格：使用dom-repeat时绑定到动态过滤器变量

1 个答案: