A2UI 选择器 Select

通过 Schema 配置生成 XSelect 下拉选择器组件。

字段配置

{
  "name": "status",
  "label": "状态",
  "type": "select",
  "props": {
    "placeholder": "请选择状态",
    "clearable": true,
    "options": [
      { "label": "启用", "value": 1 },
      { "label": "禁用", "value": 0 }
    ]
  },
  "rules": [
    { "type": "required", "message": "状态必填" }
  ]
}

Props 配置

属性	类型	默认值	说明
placeholder	string	'请选择'	占位文本
clearable	boolean	false	可清空
disabled	boolean	false	禁用状态
multiple	boolean	false	多选模式
filterable	boolean	false	可搜索
options	array	[]	选项列表

options 格式

每个选项对象包含：

interface SelectOption {
  label: string    // 显示文本
  value: any       // 选项值
  disabled?: boolean  // 是否禁用
}

示例

基础选择器

{
  "name": "gender",
  "label": "性别",
  "type": "select",
  "props": {
    "options": [
      { "label": "男", "value": "male" },
      { "label": "女", "value": "female" }
    ]
  }
}

多选选择器

{
  "name": "tags",
  "label": "标签",
  "type": "select",
  "props": {
    "multiple": true,
    "options": [
      { "label": "技术", "value": "tech" },
      { "label": "生活", "value": "life" },
      { "label": "工作", "value": "work" }
    ]
  }
}

可搜索选择器

{
  "name": "city",
  "label": "城市",
  "type": "select",
  "props": {
    "filterable": true,
    "options": [
      { "label": "北京", "value": "bj" },
      { "label": "上海", "value": "sh" },
      { "label": "广州", "value": "gz" }
    ]
  }
}

渲染组件

A2UI Select 字段会渲染为 XTO UI 的 XSelect 组件：

<XSelect
  v-model="formData.status"
  placeholder="请选择状态"
  :options="[{ label: '启用', value: 1 }, { label: '禁用', value: 0 }]"
/>

相关链接

• XSelect 组件文档 - XTO UI 选择器详细说明
• A2UI 表单 - 表单整体配置