Skip to content
关注微信公众号,获取最新动态

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

获取表单字段组件实例

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

js
// 获取文本框实例,执行 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>

  • 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 则不进行表单校验。

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

reset

  • () => promise

重置表单数据。

js
generateForm.value.reset()
js
this.reset()

setData

  • ({id: value}) => promise

设置表单数据。

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

hide

  • (fields: []) => void

隐藏表单字段。

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

// 也可以直接传递字段标识
generateForm.value.hide('id')
js
this.hide([
  'id', // 隐藏字段标识为id的字段
  'group1.id', // 隐藏嵌套组件中的字段
  'subform1.0.id', // 隐藏子表单中第一行的字段
])

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

display

  • (fields: []) => void

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


disabled

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

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

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

// 也可以直接传递字段标识
generateForm.value.disabled('id', true)
js
this.disabled([
  'id', // 一般字段禁用
  'group1.id', // 嵌套字段禁用
  'subform1.0.id', // 禁用子表单中第一行字段
], true)

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

refresh

  • () => promise

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

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

getValue

  • (field) => value

获取某一字段输入值

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

getValues

  • () => object

获取表单所有字段的值。

js
const data = generateForm.value.getValues()
js
const data = this.getValues()

sendRequest

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

执行数据源请求

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

getComponent

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

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

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

addClassName

  • (fields: [], className)

表单项添加样式类

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

removeClassName

  • (fields: [], className)

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


setRules

  • (field, rules)

设置表单字段验证规则

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

setOptions

  • (fields, options)

设置表单字段配置项,参见 字段可配置项


setOptionData

  • (fields, newData)

动态选项数据赋值,需要 options.remotetrue 时生效。

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

refreshFieldDataSource

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

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

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

getFieldDataSource ^3.5.4

  • (field)

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

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

validate

  • (fields: []) => promise

验证表单字段

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

generateForm.value.validate() // 不传字段将校验整个表单
js
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")类型文件

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

openDialog ^3.6.3

  • (dialogId: 对话框字段标识)

打开对话框

js
generateForm.value.openDialog('dialogId')
js
this.openDialog('dialogId')

closeDialog ^3.6.3

  • (dialogId: 对话框字段标识)

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