vaadinグリッド非表示列

Question

こんにちは、私はこのポリマーフレームワークを初めて使いました。私はvaadinグリッドのいくつかの列を隠すために、紙のチェックボックス要素を持つドロップダウンリストを持っています。ここに私のサンプルコードがある

マイvaadinグリッドが

<vaadin-grid id="material" class='content' aria-label="Basic Binding Example" page-size="10" column-reordering-allowed> 
    <vaadin-grid-selection-column widthtrue="66px" flex="0" select-all="{{selectAll}}"> 
     <template class="header"> 
      <paper-checkbox checked="{{selectAll}}"></paper-checkbox> 
     </template> 
     <template> 
      <paper-checkbox checked="{{selected}}"></paper-checkbox> 
     </template> 
    </vaadin-grid-selection-column> 
    <vaadin-grid-column id="firstName" resizable> 
     <template class="header"> 
      <vaadin-grid-sorter path="firstName">        
       <div class="cell"> 
        <span>First Name</span><iron-icon icon="icons:arrow-upward"></iron-icon> 
       </div> 
      </vaadin-grid-sorter> 
     </template> 
        <template>[[item.firstName]]</template> 
       </vaadin-grid-column> 
       <vaadin-grid-column id="lastName" resizable> 
        <template class="header">Last Name</template> 
        <template>[[item.lastName]]</template> 
       </vaadin-grid-column> 
       <vaadin-grid-column id="address" width="150px" resizable> 
        <template class="header">Address</template> 
        <template> 
         <p style="white-space: normal">[[item.address.street]], [[item.address.city]]</p> 
        </template> 
       </vaadin-grid-column> 
      </vaadin-grid> 

以下の通りである

<paper-icon-button icon="icons:menu" slot="dropdown-trigger" alt="hide-menu"></paper-icon-button> 
    <paper-listbox slot="dropdown-content"> 
     <template is="dom-repeat" items="{{toggleColumns}}" as="column" index-as="index"> 
      <paper-icon-item> 
       <paper-checkbox checked="{{column.hidden}}" on-click="_makeHidden">[[column.prop]]</paper-checkbox> 
      </paper-icon-item> 
     </template> 
    </paper-listbox> 
</paper-menu-button> 

マイtoggleColumn配列は

toggleColumns: { 
       type: Array, 
       notify: true, 
       value: [ 
        { 
         id: 0, prop: 'FirstName', hidden: false 
        }, { 
         id: 1, prop: 'LastName', hidden: false 
        }, { 
         id: 2, prop: 'Address', hidden: false 
        } 
       ] 
      } 

は "column.propは" に応じて変更されたチェックボックスをクリックするとあります。しかし、それをグリッド列の隠しプロパティに設定する方法はわかりません。たとえば、最初のチェックボックスをクリックするとtoggleColumns[0].hiddenがtrueになります。 this.$.firstName.hiddenをtrueにするにはどうすればいいですか？ ありがとうございます。

Answer 1

toggleColumnsは配列なので、Polymer's syntax to bind to array itemsを使用できます。たとえば、この構文はstringArrayという名前の配列、2番目の要素に結合する：あなたのケースでは

<div>{{stringArray.1}}</div> 

、<vaadin-grid-column>.hiddenに最初の要素のhiddenプロパティをバインドするために、あなたのコードは次のようになります。

<vaadin-grid-column hidden="[[toggleColumns.0.hidden]]"> 

demo

Answer 2

あなたのsplicesに変異を導入する際に注意してください。あなたのチェックボックスハンドラで

、あなたのコンポーネントのを使用してください配列変異法（継承）：

const colObj = this.toggleColumns[colPos]; 
colObj.hidden = !wasChecked; 
this.splice('toggleColumns', colPos, 1, colObj); 

だけにして説明した結合する@ tony19が正しく更新されます。