我正在使用sap.m.table。行数太大,无法容纳在页面上。因此,我希望该表提供一个滚动条。但事实并非如此。
UI5版本:1.68.1在Edge,Firefox,Chrome中测试。
这是一个简单的演示应用程序,显示带有1列25行的1 Table。屏幕上仅显示前18个项目,但没有提供滚动条:
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("TableTest.controller.App", {
onInit: function() {
var data = {
items: [
{
name: "item1"
},
{
name: "item2"
},
{
name: "item3"
},
...
]
};
var oModel = new JSONModel(data);
this.getView().setModel(oModel);
}
});
});
App.view.xml
<mvc:View
controllerName="TableTest.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Table
id="table"
items="{/items}">
<headerToolbar>
<Toolbar>
<content>
<Title text="sap.m.Table"/>
</content>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Name"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{name}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
我猜您是使用Component.js
as作为入口点启动应用程序的,因此请在App.view.xml
表格中
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
//your table here
</content>
</Page>
</pages>
</App>
</Shell>
实际上,这有助于解决我的测试应用中的问题。已经在index.html的<script>中创建了<Shell>。但是,我必须添加<Page>才能使滚动条可见。在我的真实应用程序中,sap.m.table放置在以下控件层次结构中:<Shell> <App> <semantic:FullScreenPage> <semantic:content> <layout:FixFlex> <layout:flexContent> <IconTabBar> <items > <IconTabFilter> <core:Fragment>包含表。将这个结构复制到我的测试应用程序后,我认为是FixFlex / flexContent。当我添加这些时,滚动条消失。有可能解决这个问题吗?
如果有帮助,请赞成我的回答。在您的评论中,您正在询问一个不同的问题...
当然可以。我的问题的解决方案是<layout:FixFlex>中的minFlexSize =“ 1”属性。设置此属性将允许滚动<layout:FixFlex>的<layout:flexContent>部分。