隐藏特定Vaadin网格行上的元素

时间:2018-06-12 10:52:21

标签: javascript polymer vaadin polymer-2.x

我目前正在使用带有Polymer的Vaadin Grid组件来显示数据。在每一行上都有一个+按钮,允许用户添加该行。我想从用户点击的特定行中删除+图标,但我不确定如何执行此操作。我的Vaadin Grid看起来像这样:

    <vaadin-grid id="grid" class="row-height" items="[[usagesDialog]]">

      <vaadin-grid-column width="24%">
        <template class="header">
          Configuration Name
        </template>
        <template>
          <input id="cnfgusg" class="input-row" value="[[item.ConfigName]]" readonly></input>
        </template>
      </vaadin-grid-column>

      <vaadin-grid-column width="22%">
        <template class="header">
          Configuration Type
        </template>
        <template>
          <input id="cnfgusg" class="input-row" value="[[item.ConfigType]]" readonly></input>
        </template>
      </vaadin-grid-column>

      <vaadin-grid-column width="22%">
        <template class="header">
          Source Value
        </template>
        <template>
          <input id="desc" class="input-row" value="[[item.SourceValue]]" on-input="_storeDesc" readonly></input>
        </template>
      </vaadin-grid-column>

      <vaadin-grid-column width="22%">
        <template class="header">
          Target Value
        </template>
        <template>
          <input id="desc" class="input-row" value="[[item.TargetValue]]" on-input="_storeDesc" readonly></input>
        </template>
      </vaadin-grid-column>

      <vaadin-grid-column width="10%">
        <template>
          <div align="right">
            <span title="Add usage to [[packageName]]">
              <paper-icon-button icon="add" hidden="[[addIcon]]" on-tap="_addUsage"></paper-icon-button>
            </span>
          </div>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>

单击按钮时运行的_addUsage函数如下所示:

 _addUsage(e) {
    e.model.item.addIcon == true;
    const addUsage = {
      PackageName: this.packageName,
      ConfigName: e.model.item.ConfigName,
      ConfigType: e.model.item.ConfigType,
      SourceValue: e.model.item.SourceValue
    }
    this.dispatch('newUsage', addUsage);
  }

如您所见,我正在尝试使用隐藏属性隐藏用户点击的特定行的+图标,但这不起作用。

对此有任何想法都表示赞赏。

0 个答案:

没有答案