vaadin-grid - 如何在 vaardin-grid v2.0 聚合物元素中设置行大小？

Question

如何在 vaardin-grid v2.0 聚合物元素中设置行大小？是否可以自动设置行大小以自动适应项目的大小？

Answer 1

您可以通过设置 vaadin-grid 元素的 'items' 属性将行设置为动态。

<vaadin-grid
            id="grid"
            aria-label="Remote Data Example"
            items="[[data]]"
            loading="{{loading}}"
            style="height: auto;"
            active-item="{{activeItem}}">
        <!--<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">Process</template>
            <template>[[item.name]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Start Time</template>
            <template>[[item.startTime]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Owner</template>
            <template>[[item.group]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Reactor</template>
            <template>[[item.reactor]]</template>
        </vaadin-grid-column>

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

    </vaadin-grid>

您可以从 Iron-ajax 元素的响应中设置“数据”，它是您的有效负载。