如何使用ui5-table创建手风琴式可展开/折叠列

方案一：在sap.ui.table.Table中自定义实现 #

sap.ui.table.Table本身没有原生支持列组折叠，但可以通过手动控制列的可见性实现类似手风琴的效果，步骤如下：

• 标记可折叠列：给需要分组折叠的列添加自定义标识，方便后续筛选

  // 基础列（始终显示）
  const baseCol = new sap.ui.table.Column({
    label: new sap.m.Label({ text: "基础列" }),
    template: new sap.m.Text({ text: "{baseData}" })
  });
  // 可折叠列：添加customData标记
  const foldCol1 = new sap.ui.table.Column({
    label: new sap.m.Label({ text: "详情列1" }),
    template: new sap.m.Text({ text: "{detail1}" }),
    customData: [{ key: "isFoldable", value: true }]
  });
  const foldCol2 = new sap.ui.table.Column({
    label: new sap.m.Label({ text: "详情列2" }),
    template: new sap.m.Text({ text: "{detail2}" }),
    customData: [{ key: "isFoldable", value: true }]
  });
  

• 添加切换控件：在表格工具栏添加按钮，控制可折叠列的显示/隐藏

  const toggleBtn = new sap.m.Button({
    icon: "sap-icon://navigation-down-arrow",
    press: function() {
      const currentIcon = this.getIcon();
      const isExpanded = currentIcon === "sap-icon://navigation-down-arrow";
      // 切换按钮图标
      this.setIcon(isExpanded ? "sap-icon://navigation-right-arrow" : "sap-icon://navigation-down-arrow");
      // 获取表格实例（根据实际DOM层级调整）
      const table = this.getParent().getParent();
      // 筛选所有可折叠列并切换可见性
      const foldableCols = table.getColumns().filter(col => {
        const foldFlag = col.getCustomData().find(item => item.getKey() === "isFoldable");
        return foldFlag && foldFlag.getValue();
      });
      foldableCols.forEach(col => col.setVisible(!isExpanded));
    }
  });
  // 将按钮挂载到表格工具栏
  const tableToolbar = new sap.m.Toolbar({ content: [toggleBtn] });
  const table = new sap.ui.table.Table({
    toolbar: tableToolbar,
    columns: [baseCol, foldCol1, foldCol2],
    // 其他表格配置...
  });
  

• 可选：状态持久化：可以将折叠状态绑定到ViewModel，避免页面刷新后状态丢失。

方案二：切换到sap.m.Table（原生支持列组折叠） #

如果业务场景允许替换表格组件，sap.m.Table结合sap.m.ColumnGroup可以原生实现列组的手风琴式展开/折叠，代码更简洁：

• XML视图定义

  <sap.m.Table id="myTable">
    <columns>
      <!-- 基础列 -->
      <sap.m.Column>
        <header>
          <sap.m.Label text="基础列"/>
        </header>
      </sap.m.Column>
      <!-- 可折叠列组 -->
      <sap.m.ColumnGroup expandable="true" expanded="true">
        <header>
          <sap.m.Button 
            icon="sap-icon://navigation-down-arrow" 
            press=".onToggleColumnGroup"
          />
        </header>
        <columns>
          <sap.m.Column>
            <header><sap.m.Label text="详情列1"/></header>
          </sap.m.Column>
          <sap.m.Column>
            <header><sap.m.Label text="详情列2"/></header>
          </sap.m.Column>
        </columns>
      </sap.m.ColumnGroup>
    </columns>
    <!-- 行模板 -->
    <items>
      <sap.m.ColumnListItem>
        <cells>
          <sap.m.Text text="{baseData}"/>
          <sap.m.Text text="{detail1}"/>
          <sap.m.Text text="{detail2}"/>
        </cells>
      </sap.m.ColumnListItem>
    </items>
  </sap.m.Table>
  

• 控制器切换逻辑

  onToggleColumnGroup: function(oEvent) {
    const columnGroup = oEvent.getSource().getParent().getParent();
    const isExpanded = columnGroup.getExpanded();
    // 切换列组展开状态
    columnGroup.setExpanded(!isExpanded);
    // 切换按钮图标
    oEvent.getSource().setIcon(isExpanded ? "sap-icon://navigation-right-arrow" : "sap-icon://navigation-down-arrow");
  }
  

选型建议 #

• 如果需要处理大数据量，优先选择sap.ui.table.Table的自定义方案，它的性能更适合海量数据场景；
• 如果数据量不大且追求开发效率，sap.m.Table的原生列组折叠是更优选择；
• 若需要多级折叠的复杂场景，可以基于自定义方案扩展，给列添加层级标识，实现多级展开/折叠逻辑。

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