用于聚合物1.0的自定义vaadin-grid过滤器

Question

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

但我希望创建一个打开/关闭切换按钮，它将根据两列中的文本是否匹配来过滤一列。因此，如果第一列中的一行包含text=“1.1.1”，而第二列中的同一行包含文本=“2.1.1”，那么我将保持该行的显示，并隐藏所有其他行。我想在javscript中做到这一点。我对vaadin-grid非常陌生(以前有很多使用iron-data-table的经验)。有人建议我如何访问筛选器功能吗？

image of 2 different columns of versions

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

<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);
}

虽然我可能不完全理解你的问题，因为我不明白你为什么要使用输入栏而不是按钮。如果您改为从按钮调用，则此filter方法也应同样有效。