Vaadin Grid禁用行取消选中：Polymer 2x HTML/JS实现方案

别担心，刚接触新技术遇到这种小问题太正常啦！你在Java里用到的setNullSelectionAllowed(false)，对应Polymer版本的Vaadin Grid组件，只需要设置一个属性就能实现相同效果：

实现方式 #

1. 直接在HTML标签中设置属性 #

在你的vaadin-grid标签里添加no-null-selection属性即可：

<vaadin-grid id="myGrid" no-null-selection>
  <!-- 这里是你的列定义和数据源配置 -->
  <vaadin-grid-column path="name" header="Name"></vaadin-grid-column>
  <vaadin-grid-column path="email" header="Email"></vaadin-grid-column>
</vaadin-grid>

2. 在JavaScript中动态设置 #

如果需要在组件生命周期或者某个事件里动态启用这个功能，可以通过组件的noNullSelection属性来设置：

class MyCustomView extends Polymer.Element {
  static get is() { return 'my-custom-view'; }

  connectedCallback() {
    super.connectedCallback();
    // 获取Grid实例并设置属性
    this.$.myGrid.noNullSelection = true;
  }
}
customElements.define(MyCustomView.is, MyCustomView);

效果说明 #

设置这个属性后，当Grid中有数据时，选中某一行后就无法取消选中操作了——始终会保持至少一行处于选中状态，完全对应Java版本setNullSelectionAllowed(false)的效果。

内容的提问来源于stack exchange，提问作者devAds