sap.ui.table.Table: visibleRowCountMode="Auto" 不适用于 VBox (FlexBox)

Question

我希望 sap.ui.table.Table 的行数适合屏幕高度。我尝试为此使用 visibleRowCountMode="Auto" 但一开始它不起作用，因为某些父元素没有 height="100%".

我的 table 嵌套在几个 Page 和 FlexBox 中，但这就是我的观点。

<VBox height="100%" class="sapUiTinyMarginBegin">
  <layout:Splitter id="CSL_idSplitter" height="100%" resize=".onSplitterResize">
    <VBox height="100%">
      <HBox justifyContent="SpaceBetween" height="100%">
        <VBox height="100%">
          <table:Table id="idTable" visibleRowCountMode="Auto" />
          <Button />
        </VBox>
      </HBox>
    </VBox>
  </layout:Splitter>
</VBox>

我也将此添加到我的 CSS 文件中：

html, body {
  height: 100%;
}

根据其他问题，这似乎是解决方案，但对我不起作用。我发现，在 DOM 中，table-控件的直接父级 <div>（由 UI5 自动创建，似乎不属于视图中声明的任何元素) 是问题所在，因为它没有样式 height: 100%.

这是 Chrome Dev-Tools 中的 DOM（黄色是我的 table，红色是没有任何高度的 div）：

如果我手动将高度添加到元素，visibleRowCountMode="Auto" 工作正常。

所以我找到了一个非常丑陋的解决方法，我希望任何人都知道解决这个问题的更好方法。加载 View 时，我 select table 的父 <div> 元素，并在控制器的 onAfterRendering 中以编程方式设置其高度。

onAfterRendering: function() {
  const oTable = this.byId("idTable");
  const oHTMLElement = document.getElementById(oTable.getIdForLabel());
  oHTMLElement.parentNode.style.height = "100%";  
}

由于这只是一种解决方法，我想知道真正的问题出在哪里，是否有人可以帮助我解决它。

Answer 1

这是一个工作示例：Table in nested boxes 我还包含了 Text 元素，因此您可能会看到应如何应用样式，具体取决于每个框的子元素数量。

最主要的是，在创建 VBox/HBox 时，默认情况下它将 UI 控件包装在另一个 div 元素中。因此，不仅 Box 元素必须将其高度设置为 100%，而且该 box 元素的 'item'。

其他选项是更改属性 renderType="Bare" 然后再次使用样式。 https://sapui5.hana.ondemand.com/#/api/sap.m.FlexRendertype

P.S。抱歉我的造型（仍在学习 Whosebug）

<mvc:View
   controllerName="sap.ui.sample.App"
   xmlns="sap.m"
   xmlns:l="sap.ui.layout"
   xmlns:core="sap.ui.core"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:table="sap.ui.table">
   <App>
      <Page>
         <content>
            <VBox class="sapUiTinyMarginBegin VBOX3">            
               <l:Splitter id="CSL_idSplitter" height="100%" resize="onSplitterResize">
                  <VBox class="VBox2">
                     <HBox justifyContent="SpaceBetween" class="HBox1">
                        <VBox class="VBOX1">
                           <table:Table 
                              id="idTable"
                              height="100%"
                              visibleRowCountMode="Auto"
                              fixedBottomRowCount="1"/>
                        </VBox>
                     </HBox>
                  </VBox>
               </l:Splitter>
               <Text text="Hello"/>            
            </VBox>
         </content>
      </Page>
   </App>
</mvc:View>

.VBOX3{
  height: 100% 
}

.VBOX3 div:first-of-type{
  height: 100% 
}

.VBox2{
    height:100%
}

.HBox1{
    height: 100%
}

.VBOX1{
  height: 100% 
}

.VBOX1 > div{
  height: 100% 
}

Answer 2

尝试将 renderType="Bare" 添加到所有相关的 FlexBox。来自 API 参考：

renderType

Determines whether the layout is rendered as a series of divs or as an unordered list (ul).

We recommend to use Bare in most cases to avoid layout issues due to browser inconsistencies.

和

Bare

The UI5 controls are not wrapped in an additional HTML element.

即table 的父级应该是 100% 高度的 VBox 元素，中间没有 div 元素。

Answer 3

属性 visibleRowCountMode 和 "Auto" 要求 table 在 FlexBox (VBox) 中呈现时允许增长。这可以通过 <<a href="https://openui5.hana.ondemand.com/api/sap.m.FlexItemData#controlProperties" rel="nofollow noreferrer">FlexItemData</a> growFactor="1" /> 作为附加 布局数据 到 table 来实现：

<!-- ... -->
  <VBox fitContainer="true"> <!-- or height="100%" -->
    <table:Table visibleRowCountMode="Auto">
      <table:layoutData> <!-- Every control has the aggregation `layoutData` -->
        <FlexItemData growFactor="1"/> <!-- See API ref of `sap.m.FlexItemData` -->
      </table:layoutData>
      <table:columns>
        <!-- ... -->
      </table:columns>
    </table:Table>
    <Button /> <!-- Other flex box items -->
  </VBox>
<!-- ... -->

来自API reference for visibleRowCountMode="Auto"：

The table must be rendered without siblings in its parent DOM element. The only exception is if the parent element is a CSS flex container, and the table is a CSS flex item allowed to grow and shrink.

这是一个小演示：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel", // sample model
], async (Fragment, Model) => {
  "use strict";
  
  const control = await Fragment.load({
    definition: `<VBox xmlns="sap.m" fitContainer="true" renderType="Bare">
      <table:Table xmlns:table="sap.ui.table"
        visibleRowCountMode="Auto"
        class="sapUiSizeCondensed"
        minAutoRowCount="2"
        columnHeaderVisible="false">
        <table:layoutData>
          <FlexItemData id="flexItemData" growFactor="2"/>
        </table:layoutData>
        <table:footer>
          <ToggleButton text="Toggle Grow Factor" press="onMyTogglePress" type="Transparent" />
        </table:footer>
      </table:Table>
    </VBox>`
  });
  
  control.placeAt("content");
}));

function onMyTogglePress(event) {
  const pressed = event.getParameter("pressed");
  const flexItemData = sap.ui.getCore().byId("flexItemData");
  flexItemData.setGrowFactor(pressed ? 0 : 1);
}

html, body {
  height: 100%;
}

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.unified"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-resourceroots='{ "demo": "./" }'
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

^{单击运行代码段，然后单击“整页”以查看 table 自动调整其高度。}

要了解有关 flex-grow 的更多信息，请查看 Understanding flex-grow, flex-shrink, and flex-basis。

sap.ui.table.Table: visibleRowCountMode="Auto" 不适用于 VBox (FlexBox)

sap.ui.table.Table: visibleRowCountMode="Auto" not working with VBox (FlexBox)

css

sapui5

`renderType`

`Bare`