Skip to content
On this page

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 = reactive({"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

禁用和启用操作因为是修改表单 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表单 JSON 配置数据object{}
value表单数据object-
remote表单配置的远端方法object{}
edit表单可编辑状态booleantrue
remote-option表单动态选项配置object{}
print-read打印阅读模式,表单值文本展示booleanfalse

事件

事件名说明回调参数
on-change表单项数据变化时触发(field, value, data)
field: 数据改变的字段标识
value: 数据改变后的值

方法

方法名说明参数
getData获取表单绑定的数据(isValidate = true) => promise
传入 false 不进行表单校验
reset重置表单数据() => void
setData设置表单数据({id: value}) => void
hide隐藏表单字段(fields: []) => void
display显示表单隐藏的字段(fields: []) => void
disabled动态设置表单字段是否禁用(fields: [], disabled: true | false) => void
refresh刷新表单,当表单 JSON 改变时,需调用该方法重新加载表单() => void
getValue获取某一字段输入值(field) => value
getValues获取表单所有字段的值() => object
sendRequest执行数据源请求(name: 数据源名称, args: 数据源参数) => promise
getComponent获取表单中字段组件实例(field: 字段名称) => object | array
addClassName表单项添加样式类(fields: [], className)
removeClassName移除表单样式类(fields: [], className)
setRules设置表单字段验证规则(field, rules)
setOptions设置表单字段配置项,参见 字段可配置项(fields, options)
setOptionData动态选项数据赋值,需要 options.remotetrue 时生效(fields, newData)
refreshFieldDataSource刷新字段绑定的数据源数据(field, args: 数据源参数)
validate验证表单字段(fields: []) => promise
triggerEvent调用表单配置的js事件(eventName: 事件名称, args: 事件参数)