Polymer 1.0 的自定义 vaadin-grid 过滤器

Question

我在聚合物 1.0 项目中使用 vaadin-grid#^3.0.2。

但我希望创建一个开/关切换按钮，该按钮将根据两列中的文本是否不匹配来过滤列。因此，如果第 1 列中的一行包含 text=“1.1.1”，并且第 2 列中的同一行包含 text=“2.1.1”，那么我将保持显示该行，并隐藏所有其他行。我想在javscript。我对 vaadin-grid 非常陌生（以前对 Iron-data-table 有很多经验）。有人对我如何访问过滤器功能有建议吗？

image of 2 different columns of versions

我尝试使用标准过滤器元素，但它的限制太大，因为它只允许我对一个特定的列进行基于字符串的过滤，但它不是构建的，因此我可以在两个不同列中的字​​符串之间进行比较。

<vaadin-grid-filter path="version" value="[[_filterVersion]]">
 <input  value="{{_filterVersion::input}}">
</vaadin-grid-filter>

Answer 1

查看两列值的过滤的一种简单方法是不使用vaadin-grid-filter，而只是在网格外部有一个输入字段，然后根据需要过滤绑定到网格的items 属性的数组。

<vaadin-textfield on-value-changed="_filterMethod"></vaadin-textfield>

_filterMethod(evt) {
  this.gridItems = this.allItems.filter(it => it.col1 !== it.col2);
}

虽然我可能不完全理解您的问题，因为我不知道您为什么使用输入字段而不是按钮。如果您改为从按钮调用此过滤器方法方法，它应该同样有效。