JS实现单选按钮选项不同颜色

1.1应用场景

单选按钮控件直接设置数据字典后，显示效果比较单调，有没有办法让每个选项的颜色不一样，使整体看起来比较美观并有层次感呢？

1.2实现效果

利用 html 标签来实现，效果如下所示：

2.1 设计报表

单元格设计如下所示，B2 单元格插入一个单选按钮组控件。

2.2 设置数据字典

选中 B2 单元格，设置数据字典，类型选择公式。

注：实际运用中，类型可以选数据库表或数据集查询，但是显示值依然选择公式。

实际值：["苹果","香蕉","榴莲"]

显示值："<span style='color:#fff;padding:1px 5px;border-radius:10px;background-color:" + switch($$$,"苹果","red","香蕉","#f5c13c","榴莲","green") + "'>" + $$$ + "</span>"

显示值中的html属性解析：

注：无需设置使用html显示内容，如果设置了也没有错。

2.3 预览效果

点击保存，预览后效果如下所示：

PC 端：

注：不支持移动端

点击下载模板：

JS实现单选按钮选项不同颜色.cpt