Question

假设我有一个对象数组

df.columns = df.columns.set_levels(
     df.columns.get_level_values(0).astype(int), level=0
)

这个数组被送入一个有3列的vaadin-grid，第二列对应于字段'b'。

items: {
    type: Array,
    value: [
        {a : 'Sample1', b: 'true', c: 'demo1'},
        {a : 'Sample2', b: 'false', c: 'demo'}
    ]
}

如果更改了item.b，我想要的是更改图标。那就是我想实现以下伪代码

 <vaadin-grid-column width="20px" >
 <template class="header">A</template>
 <template>
     <p>[[item.a]]</p>
 </template>
 </vaadin-grid-column>
     <vaadin-grid-column width="20px" >
 <template class="header">B</template>
 <template>
     <iron-icon icon="icon:mail"></iron-icon>
 </template>
 </vaadin-grid-column>
     <vaadin-grid-column width="20px" >
 <template class="header">C</template>
 <template>
     <p>[[item.c]]</p>
 </template>
</vaadin-grid-column>

目前，我已完成以下工作：

if(item.b == true) then
    change iron-icon's icon to 'icons:mail'
else
    change iron-icon's icon to 'icons:drafts'

但这不起作用。有人可以帮我这个吗？

Answer 1

这看起来很简单 - 替换网格的项目 - 但是虽然这会更新值，但它不会更新网格中的图标。我用（1）dom-if和（2）this.$.grid.clearCache()

解决了这个问题

<dom-module id="grid-update">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <vaadin-grid id="grid" items="[[items]]">
      <vaadin-grid-column width="20px">
        <template class="header">A</template>
        <template>
           <p>[[item.a]]</p>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column width="20px" >
        <template class="header">B</template>
        <template>
          <template is="dom-if" if="[[item.b]]">
            <paper-icon-button icon="icons:mail" on-click="_selectItem"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[!item.b]]">
            <paper-icon-button icon="icons:draft" on-click="_selectItem"></paper-icon-button>
          </template>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column width="20px" >
        <template class="header">C</template>
        <template>
           <p>[[item.c]]</p>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>

    <iron-iconset-svg id="iconset" name="icons" size="24">
      <svg>
        <defs>
          <g id="mail">
            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" class="style-scope iron-icon"></path>
          </g>
          <g id="draft">
            <path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z" class="style-scope iron-icon"></path>
          </g>
        </defs>
      </svg>
    </iron-iconset-svg>
  </template>

  <script>
    /**
     * `grid-update`
     * https://stackoverflow.com/questions/49229455/
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class GridUpdate extends Polymer.Element {
      static get is() { return 'grid-update'; }
      static get properties() {
        return {
          items: {
            type: Array,
            value: () => { return []; }
          }
        };
      }

      ready() {
        super.ready();
        this.items = [{a : 'Sample1', b: true, c: 'demo1'},
                {a: 'Sample2', b: false, c: 'demo2'}];
      }

      _selectItem(e) {
        let index = e.model.index;
        this.items[index].b = !this.items[index].b;
        this.$.grid.clearCache();
      }
    }

    window.customElements.define(GridUpdate.is, GridUpdate);
  </script>
</dom-module>

此代码可以复制到基本的PSK元素中。

Here is a pen尝试一下。

观察聚合物中的阵列项修改

1 个答案: