Fiori Elements V4 GridTable：单行输入带字符计数器且不增行高

核心思路 #

通过自定义XML片段替换默认输入组件，结合ControlConfiguration配置确保模板生效，再用CSS强制统一行高，同时利用OData注解自动同步最大长度，满足单行显示、实时计数器、长文本滚动的需求。

步骤1：正确配置自定义模板与ControlConfiguration #

之前的ControlConfiguration未生效，大概率是路径或参数配置错误。按以下方式修改manifest.json：

"sap.ui5": {
  "flexibility": {
    "customizations": {
      "controlConfiguration": {
        "sap.ui.table.Column": {
          // 替换为你的实体集+字段的LineItem路径，例如"SalesOrderItem::description"
          "YourEntitySet::description": {
            "template": "your.namespace.fragments.SingleLineTextArea",
            "templateType": "XMLFragment",
            // 非编辑模式保持用普通文本组件，避免布局错乱
            "displayModeTemplate": "sap.m.Text"
          }
        }
      }
    }
  }
}

创建对应的XML片段SingleLineTextArea.fragment.xml：

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
  <TextArea
    value="{$field>}"
    rows="1"
    growing="false"
    wrapping="Off"
    valueLiveUpdate="true"
    showExceededText="true"
    width="100%"
    class="sapUiSizeCompact single-line-textarea"
  />
</core:FragmentDefinition>

步骤2：用CSS强制统一行高 #

TextArea默认样式会导致行高偏高，添加自定义CSS覆盖样式，对齐普通Input的高度：

/* 在自定义CSS文件中添加，或通过Component.js注入 */
.single-line-textarea {
  height: 2.25rem !important; /* 匹配sap.m.Input的紧凑模式高度 */
  line-height: 1.5rem;
  overflow-x: auto;
  white-space: nowrap;
}

.single-line-textarea .sapMTextAreaInner {
  padding: 0.375rem 0.5rem; /* 对齐Input的内边距 */
  height: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

步骤3：配置OData MaxLength注解（可选但推荐） #

确保后端OData字段配置MaxLength注解，TextArea会自动读取该值作为字符计数器的上限，无需手动设置maxLength属性：

<!-- 后端EDMX文件中的字段定义 -->
<Property Name="description" Type="Edm.String" MaxLength="150" />

关键注意事项 #

• 若表格消失，检查ControlConfiguration中的路径是否正确（实体集+字段名必须与LineItem注解中的一致）
• sapUiSizeCompact类必须添加，确保组件处于紧凑模式，和GridTable的行高匹配
• wrapping="Off"配合overflow-x: auto实现长文本横向滚动，避免行高被撑开

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