1

我正在使用 vaadin 数据网格和dom-repeat模板，以创建具有动态列的网格。我还在网格的页脚中使用了过滤器。

我需要该过滤器的输入文本字段中的占位符文本，因此我必须设置输入标签。有问题的部分是value. 在 Vaadin 网格的文档中，这是一个静态命名的变量，等于列名，前面加上_filter文本字段 ( ::input) 的值，然后再追加。

如果我要对其进行硬编码，因为_inputHost::input它会绑定到“主机”列的动态生成属性，但仅限于此列。它还会导致排序中断。

在下面的示例中，我使用了_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");
4

1 回答 1

0

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>

当然我没有测试它对不起。

于 2017-11-13T18:34:58.877 回答