vaadin 网格隐藏列

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

单击复选框后，"column.prop" 会相应更改。但我不知道如何将其设置为隐藏的网格列属性。例如，单击第一个复选框会使 toggleColumns[0].hidden 变为真。现在如何使 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 网格隐藏列

vaadin grid hide column

javascript

jquery

vaadin

polymer

vaadin-grid