如何在UI5中实现sap.m.ListBase（MultiSelect模式下）列表项的部分选中显示？

好问题！我之前做项目时刚好遇到过一模一样的需求，来给你梳理两个可行的方案：

关于sap.m.ListBase的MultiSelect模式原生支持 #

首先明确：sap.m.ListBase（包括List、Table等子类）在MultiSelect模式下，原生并没有提供部分选中的状态支持——它的选中逻辑是严格的二元（选中/未选中），和sap.m.CheckBox的三态逻辑不是一回事。所以要实现类似效果，得通过自定义方式来做。

方案一：自定义列表项，嵌入三态CheckBox（简单易上手） #

放弃ListBase自带的MultiSelect模式，自己在列表项模板里嵌入sap.m.CheckBox，利用它原生的partiallySelected属性来实现部分选中效果。这种方式逻辑清晰，容易维护，适合大部分场景。

具体实现步骤： #

1. 在列表项的内容区域添加三态CheckBox，绑定它的selected和partiallySelected属性到你的模型数据：

<sap.m.List id="productList" items="{model>/products}">
  <items>
    <sap.m.StandardListItem title="{model>/name}">
      <content>
        <sap.m.CheckBox
          text="选择"
          selected="{model>/isFullySelected}"
          partiallySelected="{model>/isPartiallySelected}"
          select="onCheckBoxSelect"
        />
      </content>
    </sap.m.StandardListItem>
  </items>
</sap.m.List>

2. 在控制器里维护状态逻辑：比如当某个条目下的子项有部分选中时，就把该条目的isPartiallySelected设为true，isFullySelected设为false；当子项全选时，切换为isFullySelected=true；全不选则都设为false。
3. 处理CheckBox的点击事件，根据当前状态切换到对应状态（比如点击部分选中的CheckBox时，切换为全选或全不选）。

这种方案的好处是完全复用了UI5原生的三态CheckBox组件，不需要复杂的自定义渲染，新手也能快速上手。

方案二：扩展ListBase控件（进阶，保留原生多选特性） #

如果想保留ListBase自带的MultiSelect模式特性（比如顶部全选按钮、选中条目高亮样式），可以通过自定义控件扩展ListBase，重写它的渲染逻辑来添加部分选中状态。

具体实现步骤： #

1. 创建自定义控件继承sap.m.List，添加一个自定义属性（比如partiallySelectedItemIds）来存储需要显示部分选中状态的条目ID集合：

sap.ui.define([
  "sap/m/List"
], function(List) {
  return List.extend("my.custom.PartialSelectList", {
    metadata: {
      properties: {
        partiallySelectedItemIds: { type: "string[]", defaultValue: [] }
      }
    },
    renderer: "sap.m.ListRenderer" // 复用原生渲染器，之后重写特定方法
  });
});

2. 重写渲染器的renderItem方法，当当前条目ID在partiallySelectedItemIds中时，给条目DOM元素添加自定义CSS类：

// 在自定义控件中重写renderItem
renderItem: function(oRm, oControl, oItem) {
  sap.m.ListRenderer.renderItem.apply(this, arguments);
  const itemId = oItem.getId();
  if (oControl.getPartiallySelectedItemIds().includes(itemId)) {
    oRm.addClass("my-partial-selected");
  }
}

3. 在CSS文件中定义my-partial-selected类的样式，比如半透明背景、修改复选框图标：

.my-partial-selected .sapMLIBSelectS {
  background-image: url('path/to/partial-check-icon.svg');
}
.my-partial-selected {
  background-color: rgba(0, 128, 255, 0.1);
}

4. 在控制器中维护partiallySelectedItemIds数组，根据业务逻辑添加或移除条目ID，从而控制部分选中状态的显示。

这种方案的好处是保留了ListBase原生的多选交互，适合需要和原生多选特性深度结合的场景，但需要对UI5控件扩展有一定了解。

额外注意点 #

• 不管用哪种方案，都需要自己在模型中维护每个条目的选中状态（全选/部分选/未选），因为UI5原生没有提供部分选中状态的自动管理。
• 如果是树形结构的列表（比如sap.m.TreeList），部分选中的需求更常见，可以结合树形节点的展开状态和子节点的选中状态，自动计算父节点的部分选中状态。

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