vaadin grid hide column

Question

안녕하세요 저는이 폴리머 프레임 워크를 처음 접했습니다. 나는 vaadin 그리드의 일부 열을 감추기 위해 종이 체크 박스 요소가있는 드롭 다운 목록을 가지고 있습니다. 여기 내 예제 코드는

내 angel이라는 그리드가

<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이 참이됩니다. this.$.firstName.hidden을 true로 설정하는 방법을 알려주세요. 감사합니다.

Answer 1

toggleColumns은 배열이므로 Polymer's syntax to bind to array items을 사용할 수 있습니다. 예를 들어,이 구문은 stringArray라는 이름의 배열의 두 번째 요소에 바인딩 :

귀하의 경우

<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가 제대로 업데이트됩니다.