一、属性

labelAlign

string

标签文本对齐方式。

默认值： left

可选值： left、right

---

labelCol

object

label 标签布局，同 <Col> (opens new window) 组件，设置 span offset 值，如 { span: 3, offset: 12 } 或 sm: { span: 3, offset: 12 }

默认值: { span: 8 }

---

wrapperCol

object

需要为输入控件设置布局样式时，使用该属性，用法同 labelCol

默认值: { span: 8 }

---

colSpan

number

栅格占位格数，为 0 时相当于 display: none

默认值: 8

---

height

number | string

表单高度。

---

maxHeight

number | string

表单最大高度。

---

app

string

标记当前组件是在哪个功能组件中使用的。

默认值: 'BasicForm'

---

editType

string

编辑类型，用于区分当前操作。

默认值: 'default'

可选值: 'default'、'add'、'update'

---

initFormData

object

初始化表单数据。

默认值: {}

---

mainGrid

object

表单配置项。

提示

BasicForm 是基于 <a-form-modal /> 封装的组件。这意味着它除了文档中提到的 API 外,还可以支持 官方文档 (opens new window) 中的 API【若发现暂不支持的属性,请及时反馈！！！】。

二、方法

getForm()

获取表单实例对象。

调用此方法后，可使用的属性:

• formData: object: 表单数据对象。

调用此方法后，可使用的方法:

• 官方提供的方法 (opens new window)
• resetForm: () => void: 重置表单数据。

三、事件

formMountedFinish

({ that, componentName }) => void

表单组件安装完成事件。

参数说明:

• obj
  • that: object: 当前组件的实例对象 不建议使用
  • formRef: object: 表单对象 推荐
  • componentName: object: 组件名称

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  formMountedFinish: ({ that, componentName }) => {}
}

showDropDownBefore

({ that, formRef, columns, formData, oldFormData, editType, back }) => void

输入组件的下拉前事件。

参数说明:

• obj
  • that: object: 当前组件的实例对象 不建议使用
  • formRef: object: 表单对象 推荐
  • columns: object: 列配置对象
  • formData: object: 表单数据对象
  • oldFormData: object: 表单数据对象
  • editType: string: 编辑类型
  • back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

1. 该方法可直接挂载至 mainGrid 下。

   mainGrid: {
     // ...
     columns: [
       {
         // ...
         showDropDownBefore: ({ that, formRef, columns, formData, oldFormData, editType, back }) => {}
       }
     ]
   }
   

2. 仅对 combobox、dropdownbox、treeselect 有效。

itemChanged

({ that, formRef, value, oldValue, date?, time?, columns, formData, oldFormData, editType }) => void

输入组件的值变化事件。

参数说明:

• obj
  • that: object: 当前组件的实例对象 不建议使用
  • formRef: object: 表单对象 推荐
  • value: string | number | boolean: 输入组件的值
  • oldValue: string | number | boolean: 输入组件值变化前的值
  • date: moment: 选中的日期
  • time: moment: 选中的时间
  • columns: object: 列配置对象
  • formData: object: 表单数据对象
  • oldFormData: object: 旧表单数据对象
  • editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  columns: [
    {
      itemChanged: ({ that, grid, value, oldValue, date?, time?, columns, formData, oldFormData,  editType }) => {}
    }
  ]
}

itemPressEnter

({ that, formRef, value, columns, formData, oldFormData, editType }) => void

输入组件的值变化事件。

参数说明:

• obj
  • that: object: 当前组件的实例对象 不建议使用
  • formRef: object: 表单对象 推荐
  • value: string | number | boolean: 输入组件的值
  • columns: object: 列配置对象
  • formData: object: 表单数据对象
  • oldFormData: object: 旧表单数据对象
  • editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  columns: [
    {
      itemPressEnter: ({ that, grid, value, oldValue, date?, time?, columns, formData, oldFormData,  editType }) => {}
    }
  ]
}

itemFocus

({ that, formRef, value, columns, formData, oldFormData, editType }) => void

输入组件的值变化事件。

参数说明:

• obj
  • that: object: 当前组件的实例对象 不建议使用
  • formRef: object: 表单对象 推荐
  • value: string | number | boolean: 输入组件的值
  • columns: object: 列配置对象
  • formData: object: 表单数据对象
  • oldFormData: object: 旧表单数据对象
  • editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  columns: [
    {
      itemFocus: ({ that, grid, value, oldValue, date?, time?, columns, formData, oldFormData,  editType }) => {}
    }
  ]
}

itemBlur

({ that, formRef, value, columns, formData, oldFormData, editType }) => void

输入组件的值变化事件。

参数说明:

• obj
  • that: object: 当前组件的实例对象 不建议使用
  • formRef: object: 表单对象 推荐
  • value: string | number | boolean: 输入组件的值
  • columns: object: 列配置对象
  • formData: object: 表单数据对象
  • oldFormData: object: 旧表单数据对象
  • editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  columns: [
    {
      itemBlur: ({ that, grid, value, oldValue, date?, time?, columns, formData, oldFormData,  editType }) => {}
    }
  ]
}