GenerateForm

表单生成器组件，通过 JSON Schema 快速渲染出表单页面。

代码演示

基础用法

直接根据 JSON Schema 渲染出表单，获取表单数据。

查看代码

vue

<template>
  <fm-generate-form
    :data="jsonData"
    ref="generateForm"
  ></fm-generate-form>
  <el-button @click="handleSubmit">Submit</el-button>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const generateForm = ref()

const jsonData = {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_z2lqyv1a","remoteOption":"option_z2lqyv1a"},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"z2lqyv1a","model":"input_z2lqyv1a","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_geb5vsy8","remoteOption":"option_geb5vsy8"},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"geb5vsy8","model":"textarea_geb5vsy8","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_jg58x37w","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_jg58x37w","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"events":{"onChange":""},"name":"单选框组","key":"jg58x37w","model":"radio_jg58x37w","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""}],"dataSource":[]}}

const handleSubmit = () => {
  generateForm.value.getData().then(data => {
    ElMessageBox.alert(data, '表单数据')
  })
}
</script>

TIP

getData 是异步方法，默认情况获取数据前验证表单数据，只有验证成功才能获取到表单数据 data ；若不需要表单验证，想要直接获取表单数据，可以添加参数 getData(false) 将不会验证表单数据

加载表单数据

查看代码

vue

<template>
  <fm-generate-form
    :data="jsonData"
    :value="editData"
    ref="generateForm"
  ></fm-generate-form>

  <el-button @click="handleSubmit" type="primary">提交数据</el-button>
  <el-button @click="handleSetData">设置新数据</el-button>
  <el-button @click="handleReset" >重置表单</el-button>

</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const generateForm = ref()

const jsonData = {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_z2lqyv1a","remoteOption":"option_z2lqyv1a"},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"z2lqyv1a","model":"input","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_geb5vsy8","remoteOption":"option_geb5vsy8"},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"geb5vsy8","model":"text","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_jg58x37w","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_jg58x37w","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"events":{"onChange":""},"name":"单选框组","key":"jg58x37w","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""}],"dataSource":[]}}

const editData = {
  input: 'input',
  text: 'text',
  radio: 'Option 1'
}

const handleSubmit = () => {
  generateForm.value.getData().then(data => {
    ElMessageBox.alert(data, '表单数据')
  })
}

const handleReset = () => {
  generateForm.value.reset()
}

const handleSetData = () => {
  generateForm.value.setData({
    input: 'new input',
    text: 'new text',
    radio: 'Option 3'
  })
}
</script>

TIP

:value 属性给表单赋值，只有在表单初始化时才能生效，表单和默认数据一起加载，重置表单不会清空默认数据。

setData 可以在表单初始化后动态赋值，重置表单将会清空表单数据。

异步加载表单

查看代码

vue

<template>
  <fm-generate-form
    :data="jsonData"
    ref="generateForm"
  ></fm-generate-form>

  <el-button @click="handleLoad" >加载表单</el-button>
</template>

<script setup>
import { ref, nextTick } from 'vue'

const generateForm = ref()

const jsonData = ref({})

const handleLoad = () => {
  // 直接将json赋值给data属性
  jsonData.value = {"list":[{"type":"grid","icon":"icon-RectangleCopy","columns":[{"type":"col","options":{"span":12,"offset":0,"push":0,"pull":0,"xs":24,"sm":12,"md":12,"lg":12,"xl":12,"customClass":""},"list":[{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"requiredMessage":"","validatorCheck":false,"validator":"","showLabel":false,"width":"","options":[{"value":"1111"},{"value":"2222"},{"value":"3333"}],"remote":true,"remoteType":"datasource","remoteOption":"option_6lqq9bu5","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_6lqq9bu5","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"tableColumn":false,"remoteDataSource":"getoptions"},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"下拉选择框","novalid":{},"key":"6lqq9bu5","model":"select_6lqq9bu5","rules":[]}],"key":"nhfkr3bc"}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","hidden":false,"flex":true,"responsive":true,"remoteFunc":"func_ugqp2jf3","remoteOption":"option_ugqp2jf3"},"name":"栅格布局","key":"ugqp2jf3","model":"grid_ugqp2jf3","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""}],"dataSource":[]}}
  
  // 在 nextTick 下再调用表单的 refresh ，这是必须的，保证表单重新加载数据
  nextTick(() => {  
    generateForm.value.refresh() 
  }) 
}
</script>

监听表单数据变化

字段： --- 更改的后的值：

查看代码

vue

<template>
  <fm-generate-form
    :data="jsonData"
    ref="generateForm"
    @on-change="onChange"
  ></fm-generate-form>
  <div>字段：{{changeData.field}} --- 更改的后的值：{{changeData.value}}</div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const jsonData = {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_wwyplsj9","remoteOption":"option_wwyplsj9","tableColumn":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"wwyplsj9","model":"input","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_2ay04pyh","remoteOption":"option_2ay04pyh","tableColumn":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"2ay04pyh","model":"text","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""}],"dataSource":[]}}

const generateForm = ref()

const changeData = reactive({
  field: '',
  value: ''
})

const onChange = (field, value) => {
  changeData.field = field
  changeData.value = value
}
</script>

动态设置表单禁用隐藏

查看代码

vue

<template>
  <fm-generate-form
    :data="jsonData"
    ref="generateForm"
  ></fm-generate-form>

  <el-button type="primary" @click="handleHide">隐藏文本框</el-button>
  <el-button type="primary" @click="handleDisplay">显示文本框</el-button>
  <el-button type="primary" @click="handleDisabled">禁用文本框</el-button>
  <el-button type="primary" @click="handleEnabled">启用文本框</el-button>
</template>

<script setup>
import { ref, reactive } from 'vue'

const generateForm = ref()

const jsonData = {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_wwyplsj9","remoteOption":"option_wwyplsj9","tableColumn":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"wwyplsj9","model":"input","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_2ay04pyh","remoteOption":"option_2ay04pyh","tableColumn":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"2ay04pyh","model":"text","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_3esmng86","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_3esmng86","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"tableColumn":false},"events":{"onChange":""},"name":"单选框组","key":"3esmng86","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""}],"dataSource":[]}}

// input, text 为字段属性中配置的字段标识
const handleHide = () => {
  generateForm.value.hide(['input', 'text'])
}

const handleDisplay = () => {
  generateForm.value.display(['input', 'text'])
}

const handleDisabled = () => {
  generateForm.value.disabled(['input', 'text'], true)
}

const handleEnabled = () => {
  generateForm.value.disabled(['input', 'text'], false)
}
</script>

TIP

^3.6.0 移除禁用和启用操作因为是修改表单 json 设置的，所以需要保证 jsonData 为响应式数据，这里用到了 reactive

获取表单字段组件实例

可以通过【字段标识】来获取组件的实例，来对表单的字段组件做一些操作。

// 获取文本框实例，执行 focus 方法。
getComponent('input').focus()

// 调用子表单实例隐藏一整列
getComponent('table').hide(['input'])

// 获取子表单中第一行的 input 组件
getComponent('table.0.input')

TIP

如果表单中有多个相同的字段标识，getComponent 返回的是数组，包含所有的实例。

自定义样式动态添加

查看代码

vue

<template>
  <fm-generate-form
    :data="jsonData"
    ref="generateForm"
  ></fm-generate-form>

  <el-button @click="handleAdd">添加样式</el-button>
  <el-button @click="handleRemove">移除样式</el-button>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'

const generateForm = ref()

const jsonData = ref({})

onMounted(() => {
  jsonData.value = {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_syyx0jhb","remoteOption":"option_syyx0jhb"},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"Input","key":"syyx0jhb","model":"input","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_jxgb18ns","remoteOption":"option_jxgb18ns"},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"Textarea","key":"jxgb18ns","model":"text","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_o6xn3cpa","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_o6xn3cpa","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"events":{"onChange":""},"name":"Radio","key":"o6xn3cpa","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""}],"dataSource":[]}}

  nextTick(() => {
    generateForm.value.refresh()
  })
})

const handleAdd = () => {
  generateForm.value.addClassName(['input', 'text'], 'custom-style')
}

const handleRemove = () => {
  generateForm.value.removeClassName(['input', 'text'], 'custom-style')
}
</script>

<style>
.custom-style{
  padding: 10px;
}
.custom-style .el-form-item__label{
  font-size: 16px;
  color: red;
}
</style>

API

属性

`data`

object | {}

表单 JSON 配置数据。

vue

<fm-generate-form :data="{ /* 表单JSON数据 */ }"></fm-generate-form>

`value`

object

表单数据，用于给表单赋值，只有在表单初始化时才能生效，动态赋值需要用到 setData方法。

vue

<fm-generate-form :value="{}"></fm-generate-form>

`remote`

object | {}

表单配置的远端方法，使用方法可以查看使用方法函数。

`remote-option`

object | {}

表单动态选项配置，使用方法可以查看使用赋值变量。

`edit`

boolean | true

表单可编辑状态，默认为 true，当设置成false时，表单元素将全部禁用。

vue

<fm-generate-form :edit="false"></fm-generate-form>

`print-read`

boolean | false

打印阅读模式，默认为 false，当设置成true时，表单字段值文本展示。

vue

<fm-generate-form :print-read="true"></fm-generate-form>

事件

`on-change`

(field, value, data)

表单字段数据变化时触发。

vue

<template>
  <fm-generate-form
    :data="jsonData"
    @on-change="onChange"
  ></fm-generate-form>
</template>

<script setup>
const jsonData = {...}

const onChange = (field, value) => {
  // field: 数据改变的字段标识
  // value: 数据改变后的值
}
</script>

方法

TIP

在Vue组件中可以通过 Ref 获取到 GenerateForm 实例并调用实例方法。

vue

<template>
  <fm-generate-form ref="generateForm"></fm-generate-form>
</template>

<script setup>
import { ref } from 'vue'
const generateForm = ref()

generateForm.value.getData()
</script>

在JS动作面板函数中，this 指向的是 GenerateForm 实例，可直接通过 this 调用。

`getData`

(isValidate = true) => promise

获取表单的数据值，默认会进行表单校验，传入 false 则不进行表单校验。

VueJS动作面板

generateForm.value.getData().then(data => {
  // data: 表单数据
})

this.getData().then(data => {
  // data: 表单数据
})

`reset`

() => promise

重置表单数据。

VueJS动作面板

generateForm.value.reset()

this.reset()

`setData`

({id: value}) => promise

设置表单数据。

VueJS动作面板

generateForm.value.setData({
  'id': '常规设置',
  'group1.id': '深层对象设置',
  'subform1.0.id': '子表单第一行数据设置'
})

this.setData({
  'id': '常规设置',
  'group1.id': '深层对象设置',
  'subform1.0.id': '子表单第一行数据设置'
})

`hide`

(fields: []) => void

隐藏表单字段。

VueJS动作面板

generateForm.value.hide([
  'id', // 隐藏字段标识为id的字段
  'group1.id', // 隐藏容器组件中的字段
  'subform1.0.id', // 隐藏子表单中第一行的字段
])

// 也可以直接传递字段标识
generateForm.value.hide('id')

this.hide([
  'id', // 隐藏字段标识为id的字段
  'group1.id', // 隐藏嵌套组件中的字段
  'subform1.0.id', // 隐藏子表单中第一行的字段
])

// 也可以直接传递字段标识
this.hide('id')

`display`

(fields: []) => void

显示表单隐藏的字段，使用方法同 hide 。

`disabled`

(fields: [], disabled: true | false) => void

动态设置表单字段是否禁用

VueJS动作面板

generateForm.value.disabled([
  'id', // 一般字段禁用
  'group1.id', // 嵌套字段禁用
  'subform1.0.id', // 禁用子表单中第一行字段
], true)

// 也可以直接传递字段标识
generateForm.value.disabled('id', true)

this.disabled([
  'id', // 一般字段禁用
  'group1.id', // 嵌套字段禁用
  'subform1.0.id', // 禁用子表单中第一行字段
], true)

// 也可以直接传递字段标识
this.disabled('id', true)

`refresh`

() => promise

刷新表单，当表单 JSON 改变时，需调用该方法重新加载表单

VueJS动作面板

generateForm.value.refresh().then(() => {
  // 表单重新加载完成
})

this.refresh().then(() => {
  // 表单重新加载完成
})

`getValue`

(field) => value

获取某一字段输入值

VueJS动作面板

generateForm.value.getValue('id') // 获取一般字段
generateForm.value.getValue('group1.id') // 获取嵌套字段
generateForm.value.getValue('subform1.0.id') // 获取子表单第一行字段

this.getValue('id') // 获取一般字段
this.getValue('group1.id') // 获取嵌套字段
this.getValue('subform.0.id') // 获取子表单第一行字段

`getValues`

() => object

获取表单所有字段的值。

VueJS动作面板

const data = generateForm.value.getValues()

const data = this.getValues()

`sendRequest`

(name: 数据源名称, args: 数据源参数) => promise

执行数据源请求

VueJS动作面板

generateForm.value.sendRequest('数据源名称', {}).then(data => {
  // data: 数据源返回数据
})

this.sendRequest('数据源名称', {}).then(data => {
  // data: 数据源返回数据
})

`getComponent`

(field: 字段标识) => object | array

获取表单中字段组件实例，存在相同字段标识的多个组件，将返回组件实例数组

VueJS动作面板

const componentRef1 = generateForm.value.getComponent('id')
const componentRef2 = generateForm.value.getComponent('group1.id')
const componentRef3 = generateForm.value.getComponent('subform1.0.id')

const componentRef1 = this.getComponent('id')
const componentRef2 = this.getComponent('group1.id')
const componentRef3 = this.getComponent('subform1.0.id')

`addClassName`

(fields: [], className)

表单项添加样式类

VueJS动作面板

generateForm.value.addClassName([
  'id',
  'group1.id',
  'subform1.id' // 为子表单字段添加样式
], 'classname')

this.addClassName([
  'id',
  'group1.id',
  'subform1.id' // 为子表单字段添加样式
], 'classname')

`removeClassName`

(fields: [], className)

移除表单样式类，使用方法同 addClassName

`setRules`

(field, rules)

设置表单字段验证规则

VueJS动作面板

generateForm.value.setRules('id', [{required: true, message: '必须填写'}])
generateForm.value.setRules('subform1.id', [{required: true, message: '必须填写'}])

this.setRules('id', [{required: true, message: '必须填写'}])
this.setRules('subform1.id', [{required: true, message: '必须填写'}])

`setOptions`

(fields, options)

设置表单字段配置项，参见字段可配置项。

`getOptions` ^3.7.1

(field [, key]) => object | value

获取表单字段配置项

VueJS动作面板

generateForm.value.getOptions('fieldId')

generateForm.value.getOptions('fieldId', 'defaultValue')

this.getOptions('fieldId')

this.getOptions('fieldId', 'defaultValue')

`setOptionData`

(fields, newData)

选项数据动态赋值，~~需要 options.remote 为 true 时生效~~,

3.7.2 之后，不再限制 options.remote，可以使用该方法更新选项数据。

VueJS动作面板

// 给子表单某行某字段绑定选项数据
generateForm.value.setOptionData([`areas.${rowIndex}.city`], data)

// 给子表单某行某字段绑定选项数据
this.setOptionData([`areas.${rowIndex}.city`], data)

`getOptionData` ^3.8.0

(field) => array

获取字段选项数据。

VueJS动作面板

const data = generateForm.value.getOptionData('id')

// 给子表单某行某字段绑定选项数据
const data = this.getOptionData('id')

`refreshFieldOptionData` ^3.8.0

(field, args: 数据源参数)

刷新字段选项绑定的动态数据，如果是表达式 args 不用传。

VueJS动作面板

generateForm.value.refreshFieldOptionData('areas.province')

this.refreshFieldOptionData('areas.province')

`refreshDynamicValue` ^3.8.0

(fields, args: 数据源参数)

刷新字段动态值，不传参数表示刷新表单所有字段动态值。

VueJS动作面板

generateForm.value.refreshDynamicValue(['id', 'group1.id']) // 刷新具体字段

generateForm.value.refreshDynamicValue() // 刷新所有字段

this.refreshDynamicValue(['id', 'group1.id']) // 刷新具体字段

this.refreshDynamicValue() // 刷新所有字段

`refreshFieldDataSource` 已废弃

特别说明

该方法不再维护，V3.8.0 版本后使用 refreshFieldOptionData 代替。

(field, args: 数据源参数) => promise

刷新字段绑定的数据源数据。

VueJS动作面板

generateForm.value.refreshFieldDataSource('areas.province')

this.refreshFieldDataSource('areas.province')

`getFieldDataSource` 已废弃

特别说明

该方法不再维护，V3.8.0 版本后使用 getOptionData 代替。

(field)

获取字段绑定的数据源数据值

VueJS动作面板

const data = generateForm.value.getFieldDataSource('areas.province')

const data = this.getFieldDataSource('areas.province')

`validate`

(fields: []) => promise

验证表单字段

VueJS动作面板

generateForm.value.validate(['id', 'group1.id', 'subform1.0.id'])

generateForm.value.validate() // 不传字段将校验整个表单

this.validate(['id', 'group1.id', 'subform1.0.id'])

this.validate() // 不传字段将校验整个表单

`triggerEvent`

(eventName: 事件名称, args: 事件参数)

调用表单配置的js事件，使用方法参考调用函数

`exportPDF` ^3.5.8

() => promise

导出PDF, 当表单 print-read 属性为 true 时可用。返回 Blob (type: "application/pdf")类型文件

VueJS动作面板

generateForm.value.exportPDF().then(data => {
  // data: Blob文件
})

this.exportPDF().then(data => {
  // data: Blob文件
})

`print` ^3.8.2

() => promise

表单打印，当表单 print-read 属性为 true 时可用。返回 Blob (type: "application/pdf")类型文件

VueJS动作面板

generateForm.value.print().then(data => {
  // data: Blob文件
})

this.print().then(data => {
  // data: Blob文件
})

`openDialog` ^3.6.3

(dialogId: 对话框字段标识)

打开对话框

VueJS动作面板

generateForm.value.openDialog('dialogId')

this.openDialog('dialogId')

`closeDialog` ^3.6.3

(dialogId: 对话框字段标识)

关闭对话框，使用方法同 openDialog

GenerateForm ​

代码演示 ​

基础用法 ​

加载表单数据 ​

异步加载表单 ​

监听表单数据变化 ​

动态设置表单禁用隐藏 ​

获取表单字段组件实例 ​

自定义样式动态添加 ​

API ​

属性 ​

data ​

value ​

remote ​

remote-option ​

edit ​

print-read ​

事件 ​

on-change ​

方法 ​

getData ​

reset ​

setData ​

hide ​

display ​

disabled ​

refresh ​

getValue ​

getValues ​

sendRequest ​

getComponent ​

addClassName ​

removeClassName ​

setRules ​

setOptions ​

getOptions ^3.7.1 ​

setOptionData ​

getOptionData ^3.8.0 ​

refreshFieldOptionData ^3.8.0 ​

refreshDynamicValue ^3.8.0 ​

refreshFieldDataSource 已废弃 ​

getFieldDataSource 已废弃 ​

validate ​

triggerEvent ​

exportPDF ^3.5.8 ​

print ^3.8.2 ​

openDialog ^3.6.3 ​

closeDialog ^3.6.3 ​

GenerateForm

代码演示

基础用法

加载表单数据

异步加载表单

监听表单数据变化

动态设置表单禁用隐藏

获取表单字段组件实例

自定义样式动态添加

API

属性

`data`

`value`

`remote`

`remote-option`

`edit`

`print-read`

事件

`on-change`

方法

`getData`

`reset`

`setData`

`hide`

`display`

`disabled`

`refresh`

`getValue`

`getValues`

`sendRequest`

`getComponent`

`addClassName`

`removeClassName`

`setRules`

`setOptions`

`getOptions` ^3.7.1

`setOptionData`

`getOptionData` ^3.8.0

`refreshFieldOptionData` ^3.8.0

`refreshDynamicValue` ^3.8.0

`refreshFieldDataSource` 已废弃

`getFieldDataSource` 已废弃

`validate`

`triggerEvent`

`exportPDF` ^3.5.8

`print` ^3.8.2

`openDialog` ^3.6.3

`closeDialog` ^3.6.3