如何在sap.ui.table.Table单选模式下添加单选按钮或自定义标记？

sap.ui.table.Table的单选模式默认仅高亮选中行、不在选择列显示标记，可通过以下两种简便方式实现需求：

方案1：CSS伪元素实现（最简方案） #

不需要修改JS/视图逻辑，仅需新增自定义CSS样式，即可在选择列显示自定义标记：

/* 单选模式下选中行的选择列显示X标记 */
.sapUiTableSelModeSingle .sapUiTableRowSel.sapUiTableRowSelected::before {
    content: "X";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    color: #1a73e8;
}

如果需要显示单选按钮样式，只需将content属性值修改为"●"，调整字号即可。

方案2：自定义列+标准RadioButton控件实现（可控性更高） #

如果需要完整的单选按钮交互能力，可通过自定义列实现：

• 首先关闭表格原生的选择列，设置属性showRowSelector="false"，保留selectionMode="Single"
• 在表格列的最前侧新增自定义列，模板使用RadioButton控件，绑定选中状态与表格选中索引
• 新增单选按钮的选中事件，同步表格的行选中状态

示例XML视图代码：

<Table 
    id="demoTable" 
    selectionMode="Single" 
    showRowSelector="false"
    rows="{/tableData}">
    <columns>
        <!-- 自定义单选列 -->
        <Column width="4rem">
            <template>
                <RadioButton 
                    selected="{= ${$this>/selectedIndex} === $index }"
                    select=".onRadioSelect"
                    editable="true"
                />
            </template>
        </Column>
        <!-- 后续业务列 -->
        <Column>
            <Text text="业务字段1" />
            <template>
                <Text text="{field1}" />
            </template>
        </Column>
    </columns>
</Table>

对应控制器的事件处理方法：

onRadioSelect: function(oEvent) {
    const oClickedRadio = oEvent.getSource();
    const oRowContext = oClickedRadio.getBindingContext();
    const iRowIndex = oRowContext.getPath().split("/").pop();
    this.byId("demoTable").setSelectedIndex(parseInt(iRowIndex));
}

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