javascript - vaadin 网格隐藏列

Question

您好，我是这个 polymer 框架的新手。我有一个下拉列表，其中包含用于在 vaadin 网格中隐藏某些列的纸质复选框元素。这是我的示例代码

<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>

我的 vaadin-grid 如下所示

<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>

我的 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 为真？ 谢谢。

Answer 1

自 toggleColumns是数组，可以用Polymer's syntax to bind to array items .例如，此语法绑定(bind)到数组中的第二个元素，名为 stringArray :

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

在您的情况下，绑定(bind)第一个元素的 hidden属性(property)<vaadin-grid-column>.hidden ，您的代码将如下所示:

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

demo