在百度amis中使用input-group实现带下拉框的输入组件

百度amis作为一款优秀的前端低代码框架，提供了丰富的表单组件来满足各种业务场景需求。在实际开发中，我们经常需要实现一个带下拉选择框的输入组件，这种组合式控件能够提升用户交互体验。

常见误区

很多开发者会尝试通过input-text组件的addOn属性来实现这种效果，例如：

{
  "type": "input-text",
  "name": "name",
  "label": "角色信息",
  "addOn": {
    "type": "select",
    "options": [
      {"label": "角色名称", "value": "roleName"},
      {"label": "角色ID", "value": "roleId"}
    ]
  }
}

这种写法看似合理，但实际上并不能达到预期效果。因为addOn属性主要用于添加简单的按钮或文本，并不适合嵌套复杂的表单组件。

正确实现方式

百度amis提供了专门的input-group组件来完美解决这类需求。input-group可以将多个表单组件组合在一起，形成更复杂的交互控件。

基础实现

{
  "type": "input-group",
  "name": "search",
  "label": "角色查询",
  "body": [
    {
      "type": "select",
      "name": "type",
      "options": [
        {"label": "角色名称", "value": "roleName"},
        {"label": "角色ID", "value": "roleId"}
      ]
    },
    {
      "type": "input-text",
      "name": "keyword",
      "placeholder": "请输入查询内容"
    }
  ]
}

高级配置

input-group还支持多种布局和样式配置：

1. 方向控制：通过direction属性可以设置水平或垂直布局
2. 间距调整：使用gap属性控制组件间距
3. 标签位置：通过labelAlign调整标签对齐方式

{
  "type": "input-group",
  "direction": "horizontal",
  "gap": "sm",
  "labelAlign": "right",
  "body": [
    // 组件内容
  ]
}

实际应用场景

这种组合式输入组件特别适用于：

1. 搜索过滤场景：左侧下拉框选择过滤条件，右侧输入框输入关键词
2. 复杂参数输入：如货币输入（左侧选择币种，右侧输入金额）
3. 条件组合查询：多个条件组合查询的场景

注意事项

1. 确保每个子组件都有独立的name属性，以便正确收集表单数据
2. 对于复杂的验证需求，可以在外层配置验证规则
3. 考虑移动端适配，必要时调整布局方向

通过合理使用input-group组件，开发者可以轻松构建出功能丰富、用户体验良好的表单交互，而无需编写大量自定义代码。这充分体现了百度amis框架在提升开发效率和保证用户体验方面的优势。