乐趣区

关于前端:使用-minScreenWidth-调整-sapmTable-某一列动态显示与否的例子

jiezi

对于 SAP UI5 响应式表格来说，不应暗藏名称和状态列是列的默认行为，所以让咱们让默认值（minScreenWidth:”” 和 demandPopin:false）发挥作用。

下图是一个例子：

如果 visible 设置成 false 后，column 从屏幕上隐没：

对于小型设施，型号列 (Model Number) 应该被暗藏，所以咱们的断点是 minScreenWidth:”Small” 和 demandPopin:false（默认值）。

数量、单价和最终价格列应该进入咱们的弹出区域，因而咱们的断点依然是 minScreenWidth:”Small” 但当初应用 demandPopin:true 以在弹出区域中显示该列。

例如，在平板电脑和更宽的设施上，咱们将有更多可用空间，因而咱们能够显示“最终价格”列，但对于更小的设施，咱们将复原为弹出模式。所以这里咱们的断点应该是 minScreenWidth:”Tablet” 和 demandPopin:true。

什么是 SAP UI5 sap.m.Column 的 minScreenWidth 属性？

SAP UI5 中的 sap.m.Column 是用于在 Table 和 ColumnListItem 控件中创立列的 UI 元素。minScreenWidth 是该控件的一个属性，用于定义列应在哪个屏幕宽度下暗藏。

当 minScreenWidth 设置为某个特定屏幕宽度（例如“600px”）时，如果设施的屏幕宽度小于该值，则该列将被暗藏。这能够帮忙在小屏幕设施上进步用户体验，使表格内容更加易于查看和操作。当用户应用大屏幕设施时，该列将主动显示进去。

例如，假如您有一个具备五个列的表格，您能够为其中的某些列设置 minScreenWidth 属性。如果用户在小屏幕设施上查看该表格，只会显示设置了 minScreenWidth 属性为较大值的列，其余列将被暗藏。当用户在大屏幕设施上查看该表格时，所有列都将显示进去。

上面是一个例子：

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
  <Table id="myTable">
    <columns>
      <Column>
        <Text text="Column 1" />
      </Column>
      <Column minScreenWidth="600px">
        <Text text="Column 2" />
      </Column>
    </columns>
    <items>
      <ColumnListItem>
        <cells>
          <Text text="Data 1" />
          <Text text="Data 2" />
        </cells>
      </ColumnListItem>
    </items>
  </Table>
</mvc:View>

在这个例子中，Column 元素中的 minScreenWidth 属性设置为 ”600px”，这意味着在设施屏幕宽度小于 600 像素时，该列将被暗藏。另外一个 Column 元素没有设置 minScreenWidth 属性，这意味着该列将始终显示，无论屏幕宽度大小。

退出移动版