我目前正在使用带有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);
}
如您所见,我正在尝试使用隐藏属性隐藏用户点击的特定行的+图标,但这不起作用。
对此有任何想法都表示赞赏。