使用下拉选择 Select

自定义下拉选项的显示内容

默认 Select 的下拉选项会显示 mapping.label，同时，可以也自定义显示内容，如下示例所示：

备注

Select 的配置和 ACL 的自定义下拉选项配置一致，为了统一下面示例使用的是 ACL 组件。

select-item-field-eg

配置方式如下：

打开 json 编辑模式。
在 Select 组件的 componentProps 中添加 itemField 属性。该属性可以是任意系统支持的组件。

这里的示例是显示了一个图标和 mapping.label 的值加上数据 id，itemField 的示例 json 如下：

{
  "component": "Stack",
  "componentProps": {
    "alignItems": "center"
  },
  "fields": [
    {
      "component": "Image",
      "componentProps": {
        "src": ":avatar.resources.0.url",
        "style": {
          "width": "40px",
          "height": "40px",
          "borderRadius": "50%"
        }
      }
    },
    {
      "component": "Stack",
      "componentProps": {
        "flexDirection": "column",
        "gap": 0
      },
      "style": {
        "flex": 1
      },
      "fields": [
        {
          "component": "Text",
          "componentProps": {
            "content": ":nickName",
            "style": {
              "lineHeight": "20px"
            }
          }
        },
        {
          "component": "Text",
          "componentProps": {
            "content": ":email",
            "style": {
              "fontSize": "12px",
              "lineHeight": "14px",
              "color": "var(--helper-color)",
              "overflow": "hidden",
              "textOverflow": "ellipsis"
            }
          }
        }
      ]
    }
  ]
}

将其中的 :avatar.resources.0.url, :nickName 和 :email 改成对应的冒号语法引用数据字段即可。

select-item-field

API

完整的 Select API 参考在此处 Select

自定义下拉选项的显示内容​

API​

自定义下拉选项的显示内容

API