Question

我正在使用vaadin-grid元素（聚合物Web组件，而不是java网格）。我看到我可以通过<int:chain input-channel="requestChannel"> <int:header-enricher> <int:header name="SOAPAction" value="http:/foo/bar" /> </int:header-enricher> <int-http:outbound-gateway header-mapper="mapper" url="http://localhost:18080/http/receiveGateway" http-method="POST" expected-response-type="java.lang.String"/> </int:chain> <bean id="mapper" class="org.springframework.integration.http.support.DefaultHttpHeaderMapper"> <property name="userDefinedHeaderPrefix" value=""/>  <property name="outboundHeaderNames" value="SOAPAction" /> </bean>属性设置网格上显示的行数。但我无法找到一种方法让网格占用所有可用空间，即动态地将行设置为填充页面所需的行。文档暗示这是可能的。 demo expenses app似乎也是这样做的，虽然我无法弄清楚在哪里。

这是一个非常简单的示例，无论页面大小如何，总会显示10行。

visible-rows

Answer 1

除了使用visible-rows属性外，您还可以使用纯CSS直接设置height属性。

您也可以在费用管理器演示中使用flex之类的操作。

我稍微修改了您的代码，以举例说明如何使用flex属性。

   <head>
    <script src="https://cdn.vaadin.com/vaadin-elements/latest/webcomponentsjs/webcomponents-lite.js"></script>
    <link href="https://cdn.vaadin.com/vaadin-elements/latest/vaadin-grid/vaadin-grid.html" rel="import">
</head>

    <body style="display: flex; flex-direction: column">
    <div id="content" style="flex: 1">
      Some Content Here
    </div>
    <div id="container" style="flex: 3; display: flex">
    <vaadin-grid style="flex: 1">
        <table>
            <colgroup>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Progress</th>
            </tr>
            </thead>
            <tbody>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            </tbody>
        </table>
    </vaadin-grid>
    </div>
    </body>

    </html>

您可以在jsbin上实时试用：http://jsbin.com/kigonu/edit?html,css,output

如何让vaadin-grid填充页面

1 个答案: