Question

您好我是这个聚合物框架的新手。我有一个带有纸质复选框元素的下拉列表，用于隐藏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
                    }
                ]
            }

单击复选框＆＃34; column.prop＆＃34;相应地改变了。但我无法弄清楚如何将其设置为网格列隐藏属性。例如，单击第一个复选框可使toggleColumns[0].hidden为true。现在如何让this.$.firstName.hidden成为现实？谢谢。

Answer 1

由于toggleColumns是一个数组，因此您可以使用Polymer's syntax to bind to array items。例如，此语法绑定到数组中的第二个元素，名为stringArray：

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

在您的情况下，要将第一个元素的hidden属性绑定到<vaadin-grid-column>.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才能正确更新。

vaadin网格隐藏列

2 个答案: