vaadin-grid 选择不起作用

Question

第 selection 行对我不起作用。 selectedItems 数组只有在我同时 select 所有内容时才会更改。我不确定是我弄错了什么还是错误。

selectedItems: An array that contains the selected items. https://www.webcomponents.org/element/vaadin/vaadin-grid/elements/vaadin-grid

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html">

<dom-module id="schedule-vaadin-test">

    <template>

        <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items="{{selectedItems}}">

            <vaadin-grid-selection-column auto-select>
            </vaadin-grid-selection-column>

            <vaadin-grid-column width="50px" flex-grow="0">
                <template class="header">#</template>
                <template>[[index]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">First Name</template>
                <template>[[item.firstName]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">Last Name</template>
                <template>[[item.lastName]]</template>
            </vaadin-grid-column>

        </vaadin-grid>
    </template>

    <script>
        /**
         * @customElement
         * @polymer
         */
        class ScheduleVaadinTest extends Polymer.Element {
            static get is() {
                return 'schedule-vaadin-test';
            }

            static get properties() {
                return {
                    items: {
                        type: Array,
                        value: [{"firstName":"Foo", "lastName":"Bar"},
                                {"firstName":"Foo", "lastName":"Bar"},
                                {"firstName":"Foo", "lastName":"Bar"}]
                    },

                    selectedItems: {
                        type: Array,
                        observer: 'selectedItemsChanged'
                    }
                };
            }

            static get observers() {
                return []
            }

            selectedItemsChanged() {
                console.log(this.selectedItems);
            }
        }

        customElements.define(ScheduleVaadinTest.is, ScheduleVaadinTest);
    </script>
</dom-module>

Answer 1

这是适合您的工作代码：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<template>

    <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items={{selectedItems}} active-item="{{selectedItem}}">

        <vaadin-grid-selection-column auto-select>
        </vaadin-grid-selection-column>

        <vaadin-grid-column width="50px" flex-grow="0">
            <template class="header">#</template>
            <template>[[index]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">First Name</template>
            <template>[[item.firstName]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Last Name</template>
            <template>[[item.lastName]]</template>
        </vaadin-grid-column>

    </vaadin-grid>
</template>

<script>
    /**
     * @customElement
     * @polymer
     */
    class ScheduleVaadinTest extends Polymer.Element {
        static get is() {
            return 'schedule-vaadin-test';
        }

        static get properties() {
            return {
                items: {
                    type: Array,
                    value: [{"firstName":"Foo", "lastName":"Bar"},
                        {"firstName":"Foo2", "lastName":"Bar2"},
                        {"firstName":"Foo3", "lastName":"Bar3"}]
                },
                selectedItem: {
                    type: Array,
                }
                ,
                selectedItems: {
                    type: Array,
                }
            };
        }

        static get observers() {
            return ['_selectedItemsChanged(selectedItem, selectedItems)'];
        }

         _selectedItemsChanged(selectedItem, selectedItems){
            console.log(selectedItems);
        }
    }

    customElements.define(ScheduleVaadinTest.is, ScheduleVaadinTest);
</script>

我添加了 activeItem 属性来保存用户上次交互的项目。另外，观察者被更改为观察单个或多个变化。

Answer 2

Complex observers are declared in the observers array. Complex observers can monitor one or more paths. These paths are called the observer's dependencies.

我只是忘了使用复杂的观察器。我不确定为什么对象在选择时会更改两次。我会尽快更新这个答案。

[编辑：观察者被更改为仅观察splice。数组的值没有改变两次，而是在控制台上打印两次，因为您使用的是通配符 (*) 观察器。它首先在观察到拼接时调用观察器，然后在观察到数组长度的变化时调用观察器。 ]

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html">

<dom-module id="schedule-vaadin-test">

    <template>

        <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items="{{selectedItems}}">

            <vaadin-grid-selection-column>
            </vaadin-grid-selection-column>

            <vaadin-grid-column width="50px" flex-grow="0">
                <template class="header">#</template>
                <template>[[index]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">First Name</template>
                <template>[[item.firstName]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">Last Name</template>
                <template>[[item.lastName]]</template>
            </vaadin-grid-column>

        </vaadin-grid>
    </template>

    <script>
        /**
         * @customElement
         * @polymer
         */
        class ScheduleVaadinTest extends Polymer.Element {
            static get is() {
                return 'schedule-vaadin-test';
            }

            static get properties() {
                return {
                    items: {
                        type: Array,
                        value: [{"firstName":"Foo1", "lastName":"Bar1"},
                                {"firstName":"Foo2", "lastName":"Bar2"},
                                {"firstName":"Foo3", "lastName":"Bar3"}]
                    },
                    /*activeItem: {
                        type: Array,
                        observer: '_activeItemChanged'
                    },--this is not being used*/

                    selectedItems: {
                        type: Array
                    }
                };
            }

            static get observers() {
                return [
                    //'_selectedItemsChanged(selectedItems.*)'
                      '_selectedItemsChanged(selectedItems.splices)'
                ]
            }

            _selectedItemsChanged() {
                console.log(this.selectedItems);
            }
        }

        customElements.define(ScheduleVaadinTest.is, ScheduleVaadinTest);
    </script>
</dom-module>

vaadin-grid 选择不起作用

vaadin-grid selection not working

html

javascript

polymer

vaadin-grid

polymer-2.x