field

field 字段用于指定表单中每个组件的数据绑定字段名称。这个字段决定了组件的数据在表单数据对象中的存储位置，是表单数据双向绑定的核心。

字段类型

field: string

示例

基本表单字段绑定

为表单中的每个组件指定 field 字段，以确保在表单数据对象中正确存储和获取对应的值。

{
    type: 'input',
    field: 'username',  // 绑定用户名字段
    title: '用户名',
    props: {
        placeholder: '请输入用户名'
    }
},
{
    type: 'input',
        field: 'email',  // 绑定邮箱字段
    title: '邮箱',
    props: {
        placeholder: '请输入邮箱地址'
    }
},
{
    type: 'input',
        field: 'phone',  // 绑定电话号码字段
    title: '电话号码',
    props: {
        placeholder: '请输入电话号码'
    }
}

生成自定义Vue组件

可以使用 type 字段生成已注册的自定义 Vue 组件。这个示例假设有一个名为 CustomInput 的自定义组件。

{
  type: 'CustomInput',
  field: 'custom_field',
  title: '自定义输入框',
  props: {
    placeholder: '请输入自定义内容'
  }
}

数据回显与动态绑定

在编辑表单或回显数据时，field 字段使得表单组件能够根据数据对象中的内容自动填充和显示。

{
   type: 'div',
   children: [
      {
         type: 'span',
         title: '标签内容'
      },
      {
         type: 'input',
         field: 'simple_input',
         title: '简单输入框'
      }
   ]
}