SAPUI5表格编辑模式问题：视图与编辑控件列错位

问题根源在于<ColumnListItem>的<cells>节点下，每个直接子元素都会对应表格的一列。你现在把Text和Input作为同级子元素，它们自然会被分配到不同列，导致视图模式显示第一列、编辑模式显示第二列的问题。

修复方案 #

将同一列需要切换的Text和Input控件包裹在同一个容器（比如<VBox>，垂直布局容器，因两个控件不会同时显示，垂直布局不影响显示效果）中，让这个容器作为<cells>的单个子元素，对应表格的一列。修改后的代码示例：

<items>
  <ColumnListItem>
    <cells>
      <!-- 第一列：视图/编辑控件放在同一容器内 -->
      <VBox>
        <Text text="{Name}" visible="{= !${/editMode}}"/>
        <Input value="{Name}" visible="{= ${/editMode}}" change="onChangeName"/>
      </VBox>
      <!-- 后续列同理 -->
      <VBox>
        <Text text="{Age}" visible="{= !${/editMode}}"/>
        <Input value="{Age}" visible="{= ${/editMode}}" change="onChangeAge"/>
      </VBox>
      ...
    </cells>
  </ColumnListItem>
</items>

效果说明 #

• 视图模式下：Input隐藏，Text在容器内显示，对应表格的一列
• 编辑模式下：Text隐藏，Input在同一容器内显示，占据同一列位置

截图对比 #

视图模式（Text控件）

编辑模式（Input控件）

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