如何在动态高度sap.m.ScrollContainer中实现sap.m.Table表头栏与列头固定

问题背景 #

在SAP UI5视图中，sap.m.Table嵌套于sap.m.Panel内，当表格条目较多时，需要滚动时保持HeaderToolbar和ColumnHeaders固定显示。当前实现中使用了ScrollContainer并设置height="100%"，但表格的sticky="HeaderToolbar,ColumnHeaders"属性仅在ScrollContainer设置固定高度时生效，动态高度下失效，且无法使用视口单位（如vh）。

可行解决方案 #

方案1：移除外层ScrollContainer，直接为Table设置动态高度 #

ScrollContainer的动态高度会导致Table无法正确识别滚动容器边界，因此可以直接将Table作为Panel的内容节点，通过给Table设置height="100%"，同时确保Panel及其父容器的高度约束正确传递。

修改后的视图代码：

<mvc:View
    xmlns:l="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Panel headerText="Some other panel" class="sapUiResponsiveMargin">
        <content>
            <Text text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."/>
        </content>
    </Panel>
    <Panel title="My panel" class="sapUiResponsiveMargin" height="calc(100% - 200px)">
        <content>
            <Table sticky="HeaderToolbar,ColumnHeaders" height="100%">
                <headerToolbar>
                    <OverflowToolbar>
                        <Text text="My panel"/>
                    </OverflowToolbar>
                </headerToolbar>
                <columns>
                    <Column>
                        <Text text="Column 1"/>
                    </Column>
                    <Column>
                        <Text text="Column 2"/>
                    </Column>
                    <Column>
                        <Text text="Column 3"/>
                    </Column>
                    <Column>
                        <Text text="Column 4"/>
                    </Column>
                    <Column>
                        <Text text="Column 5"/>
                    </Column>
                </columns>
                <items>
                    <!-- 表格条目 -->
                </items>
            </Table>
        </content>
    </Panel>
</mvc:View>

说明：这里通过calc(100% - 200px)给Panel设置动态高度（200px为上方Panel及边距的总高度），确保Panel有明确的高度后，Table的height="100%"可以正确计算可用空间，sticky属性即可正常生效。

方案2：通过控制器动态计算高度 #

如果无法提前确定上方元素的高度，可以在控制器中监听视图渲染完成和窗口 resize 事件，动态计算Panel的可用高度并赋值给Table。

控制器代码示例：

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("your.namespace.Controller", {
        onAfterRendering: function() {
            this._adjustTableHeight();
            // 监听窗口 resize 事件
            window.addEventListener("resize", this._adjustTableHeight.bind(this));
        },

        onExit: function() {
            window.removeEventListener("resize", this._adjustTableHeight.bind(this));
        },

        _adjustTableHeight: function() {
            var oPanel = this.getView().byId("yourPanelId"); // 给Panel设置id
            var oTable = this.getView().byId("yourTableId"); // 给Table设置id
            if (!oPanel || !oTable) return;

            var oPanelDom = oPanel.getDomRef();
            var iPanelHeaderHeight = oPanelDom.querySelector(".sapMPanelHdr").offsetHeight;
            var iPanelPadding = parseInt(window.getComputedStyle(oPanelDom).paddingTop) + parseInt(window.getComputedStyle(oPanelDom).paddingBottom);
            var iAvailableHeight = oPanelDom.offsetHeight - iPanelHeaderHeight - iPanelPadding;

            oTable.setHeight(iAvailableHeight + "px");
        }
    });
});

说明：通过获取Panel的DOM元素，计算出扣除标题、内边距后的可用高度，将该高度赋值给Table，确保Table有明确的高度约束，sticky属性即可生效。

方案3：使用Flex布局管理容器高度 #

将视图的根容器设置为Flex布局，让Panel自动填充剩余空间，无需手动计算高度。

修改视图代码，添加VerticalLayout作为根容器：

<mvc:View
    xmlns:l="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <l:VerticalLayout class="sapUiHeight100">
        <Panel headerText="Some other panel" class="sapUiResponsiveMargin">
            <content>
                <!-- 上方Panel内容 -->
            </content>
        </Panel>
        <Panel title="My panel" class="sapUiResponsiveMargin" height="100%">
            <content>
                <Table sticky="HeaderToolbar,ColumnHeaders" height="100%">
                    <!-- 表格内容 -->
                </Table>
            </content>
        </Panel>
    </l:VerticalLayout>
</mvc:View>

同时添加自定义CSS：

.sapUiHeight100 {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sapUiHeight100 .sapMPanel:nth-child(2) {
    flex: 1;
    overflow: hidden;
}

说明：通过Flex布局让第二个Panel自动填充剩余空间，Table设置height="100%"后即可正确识别滚动区域，sticky属性正常工作。

内容的提问来源于stack exchange，提问作者Rootinator