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屬性解析：

屬性設定	含義
color:#fff	正文顏色為白色
padding:1px 5px	上下內邊距為1px，左右內邊距為5px
border-radius:10px	設定span標籤為圓角，圓角程度10px
background-color:red	根據公式switch($$$,"蘋果","red","香蕉","#f5c13c","榴蓮","green")運算後的值設定span標籤的背景顏色

注：無需設定使用html顯示內容，如果設定了也沒有錯。

2.3 預覽效果

點選儲存，預覽後效果如下所示：

PC 端：

注：不支援行動端

點選下載範本：JS實現無線電鈕選項不同顏色.cpt