Sapui5 sap.m.使用彩色图标选择列表项

我想使用

sap.m.Select

控件，它显示带有图标的

sap.ui.core.ListItem

控件列表。这是开箱即用的，所有带有图标的选择项都以默认的蓝色呈现

但是，基于绑定模型中的属性，我希望图标具有某种颜色。要有条件地设置控件的样式，我将使用

customData

聚合，并基于映射的键值，呈现附带的样式。对于其他用例（列表、表格等），这就像一个符咒

我认为问题在于

sap.ui.core.ListItem

控件。如果我使用以下简化示例：

<Select selectedKey="{/mykey}">
    <core:ListItem key="1" text="One" icon="sap-icon://circle-task-2">
        <core:customData>
            <core:CustomData
                key="iconcolor"
                value="grey"
                writeToDom="true"/>
        </core:customData>
    </core:ListItem>
</Select>

[data iconcolor=“none”]span.sapMSelectListItemIcon{
颜色：灰色；
}
[data iconcolor=“inprogress”]span.sapMSelectListItemIcon{
颜色：蓝色；
}
[data iconcolor=“done”]span.sapMSelectListItemIcon{
颜色：绿色；
}

---

嘿，这是我的工作

Model-Controller.js

var oItems = new JSONModel({
                items: [{
                    "key": "01",
                    "text": "01",
                    "color": "yellow",
                    "icon": "sap-icon://save"
                }, {
                    "key": "02",
                    "text": "02",
                    "color": "green",
                    "icon": "sap-icon://cancel"
                }]
            });
            this.setModel(oItems, "select");

Select-View.xml

    <Select forceSelection="false" width="300px" items="{ path: 'select>/items'}">
            <core:ListItem key="{select>key}" text="{select>text}" icon="{select>icon}">
                <core:customData>
                    <core:CustomData key="iconcolor" value="{select>color}" writeToDom="true"/>
                </core:customData>
            </core:ListItem>
        </Select>

结果:

---

谢谢，这很有效！出于速度方面的原因，我在没有数据绑定的情况下原型化了一个示例，但不知何故，这个示例不起作用。使用数据绑定，将

data-

属性写入DOM。万分感谢

[data-iconcolor="green"] {
    color: green;
}

[data-iconcolor="yellow"] {
    color: yellow;
}