在form-create中获取group嵌套内部自定义按钮所属字段数据的方法

form-create是一个基于Vue的表单生成组件库，它能够通过JSON配置快速生成表单。在实际开发中，我们经常会遇到需要在group组件内部使用自定义按钮，并获取该group中其他字段值的需求。

问题背景

当使用form-create的group组件进行表单嵌套时，开发者可能会遇到一个常见需求：在group内部放置自定义按钮，并希望这些按钮能够访问到同group范围内的其他字段数据。这在需要实现"测试连接"、"部署"等功能按钮时尤为常见。

解决方案

通过分析form-create的组件结构，我们可以发现自定义按钮组件会接收到一个包含完整上下文信息的参数对象。这个对象中包含了访问表单API所需的关键属性：

const doTest = (res, a, b) => {
  const api = res.prop.props.formCreateInject.api
  console.log("获取link字段值:", api.getValue("link"))
  console.log("获取password字段值:", api.getValue("password"))
}

实现原理

1. 上下文传递：form-create在渲染自定义组件时，会将当前表单的上下文信息通过props注入到组件中

2. API访问：通过res.prop.props.formCreateInject.api可以获取到当前表单的API对象

3. 值获取：使用api.getValue(fieldName)方法可以直接获取指定字段的值

实际应用示例

假设我们有一个服务器配置表单，其中包含多个服务器组，每个组内有服务器地址、连接信息和操作按钮：

{
  type: 'group',
  field: 'servers',
  props: {
    rule: [
      { type: 'input', field: 'address', title: "服务器地址" },
      { type: 'input', field: 'username', title: "用户名" },
      { type: 'password', field: 'password', title: "密码" },
      { 
        type: 'customButton',
        title: "操作",
        emit: ['testConnection']
      }
    ]
  }
}

在自定义按钮组件中，我们可以这样实现测试连接功能：

const testConnection = (res) => {
  const api = res.prop.props.formCreateInject.api
  const connectionInfo = {
    address: api.getValue('address'),
    username: api.getValue('username'),
    password: api.getValue('password')
  }
  // 调用测试连接API
  testServerConnection(connectionInfo)
}

注意事项

1. 字段作用域：获取的字段值仅限于当前group范围内的字段

2. 表单更新：如果需要在操作后更新表单状态，可以使用api.setValue方法

3. 异步操作：对于需要异步处理的操作，建议在按钮上添加loading状态提升用户体验

总结

form-create提供了灵活的方式让我们在group内部自定义组件中访问同组字段数据。通过理解其上下文传递机制，我们可以轻松实现各种复杂的表单交互需求。这种方法不仅适用于按钮组件，也可以应用于其他需要访问表单数据的自定义组件中。