如何在sap.m.Table中设置多表头与headerSpan？

核心思路 #

sap.m.Table没有原生列分组功能，通过自定义表头工具栏+CSS样式实现分组标题跨列+下划线效果，配合列头的VBox布局完成子标题展示。

代码实现 #

XML视图示例

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
  <Table id="groupedTable" width="100%" class="groupedTable">
    <!-- 分组表头工具栏 -->
    <headerToolbar>
      <Toolbar class="groupHeaderToolbar">
        <FlexBox width="100%" justifyContent="SpaceBetween">
          <!-- 第一个分组：基础信息 -->
          <FlexBox class="groupContainer" width="30%">
            <Label text="基础信息" class="groupTitle"/>
          </FlexBox>
          <!-- 第二个分组：交易数据 -->
          <FlexBox class="groupContainer" width="40%">
            <Label text="交易数据" class="groupTitle"/>
          </FlexBox>
          <!-- 第三个分组：状态信息 -->
          <FlexBox class="groupContainer" width="30%">
            <Label text="状态信息" class="groupTitle"/>
          </FlexBox>
        </FlexBox>
      </Toolbar>
    </headerToolbar>
    <!-- 表格列定义 -->
    <columns>
      <!-- 基础信息组列 -->
      <Column width="15%">
        <header>
          <VBox textAlign="Center">
            <Label text="ID"/>
          </VBox>
        </header>
      </Column>
      <Column width="15%">
        <header>
          <VBox textAlign="Center">
            <Label text="名称"/>
          </VBox>
        </header>
      </Column>
      <!-- 交易数据组列 -->
      <Column width="13%">
        <header>
          <VBox textAlign="Center">
            <Label text="金额"/>
          </VBox>
        </header>
      </Column>
      <Column width="13%">
        <header>
          <VBox textAlign="Center">
            <Label text="日期"/>
          </VBox>
        </header>
      </Column>
      <Column width="14%">
        <header>
          <VBox textAlign="Center">
            <Label text="类型"/>
          </VBox>
        </header>
      </Column>
      <!-- 状态信息组列 -->
      <Column width="15%">
        <header>
          <VBox textAlign="Center">
            <Label text="审核状态"/>
          </VBox>
        </header>
      </Column>
      <Column width="15%">
        <header>
          <VBox textAlign="Center">
            <Label text="操作"/>
          </VBox>
        </header>
      </Column>
    </columns>
    <!-- 表格行数据（示例） -->
    <items>
      <ColumnListItem>
        <cells>
          <Text text="001"/>
          <Text text="商品A"/>
          <Text text="¥100"/>
          <Text text="2024-05-20"/>
          <Text text="采购"/>
          <Text text="已审核"/>
          <Button text="编辑"/>
        </cells>
      </ColumnListItem>
    </items>
  </Table>
</mvc:View>

CSS样式（放在Component.css或自定义样式文件）

/* 分组表头工具栏样式 */
.groupHeaderToolbar {
  border-bottom: 1px solid #cccccc; /* 底部下划线 */
  padding-bottom: 8px;
}

.groupContainer {
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 分组标题下划线 */
.groupTitle:after {
  content: "";
  position: absolute;
  bottom: -8px; /* 与工具栏下划线对齐 */
  left: 10%;
  width: 80%;
  height: 2px;
  background-color: #0070f3; /* 自定义下划线颜色 */
}

/* 表格列头对齐调整 */
.groupedTable .sapMListTblHeaderCell {
  padding-top: 12px;
}

关键说明 #

• 用headerToolbar的FlexBox按比例划分分组区域，对应下方表格列的宽度总和，确保分组标题与列对齐。
• 通过CSS伪元素::after给分组标题添加下划线，调整位置与工具栏的底部线配合。
• 列头的VBox用于统一子标题的居中对齐，若需要多行子标题，直接在VBox内添加多个Label即可。

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