GenerateForm

A form Generator component that can quickly render form pages using a JSON Schema.

Code Demonstration

Basic Usage

Render the form directly according to the JSON Schema and get the form data.

View code

vue

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

    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button type="primary" @click="handleSubmit(false)">Submit(Not validating)</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleSubmit (validate = true) {
      this.$refs.generateForm.getData(validate).then(data => {
        this.$alert(data, 'Form Data')
      })
    }
  }
}
</script>

TIP

getData is an asynchronous method. By default, the form data is verified before obtaining data. Only the verification is successful can the form data be obtained. If you don't need form validation and want to get the form data directly, you can add the parameter getData(false) that will not validate the form data.

Load Form Data

View code

vue

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

    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button type="primary" @click="handleRest">Reset</el-button>
    <el-button type="primary" @click="handleSetData">setData</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
      editData: {
        input: '123',
        textarea: '123'
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        this.$alert(data, 'Form Data')
      })
    },
    handleRest () {
      this.$refs.generateForm.reset()
    },
    handleSetData () {
      this.$refs.generateForm.setData({
        input: 'new 123',
        textarea: 'new 123',
        radio: 'Option 1'
      })
    }
  }
}
</script>

TIP

The value attribute assigns a value to the form and takes effect only when the form is initialized. The form is loaded with default data. Resetting the form does not empty the default data.

The setData method can assign values dynamically after the form is initialized. Resetting the form will empty the form data.

Asynchronous Load Form

View code

vue

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

    <el-button type="primary" @click="handleLoad">Load Form</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {},
    }
  },
  methods: {
    handleLoad () {
      this.jsonData = {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}}

      this.$nextTick(() => {
        this.$refs.generateForm.refresh()
      })
    }
  }
}
</script>

TIP

After obtaining json, directly modify the data property value. If you modify the form configuration, you need to call the refresh method in the $nextTick() method to refresh the form.

Listen for Form Data Changes

表单值变化: --

View code

vue

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
      @on-change="onChange"
    >
    </fm-generate-form>
    <div>Form value change: {{field}} -- {{value}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
      field: '',
      value: ''
    }
  },
  methods: {
    onChange (field, value, data) {
      this.field = field
      this.value = value
    }
  }
}
</script>

Dynamically Set Form to Disable/Hide

View code

vue

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleHide">Hide</el-button>
    <el-button type="primary" @click="handleDisplay">Display</el-button>
    <el-button type="primary" @click="handleDisabled">Disable</el-button>
    <el-button type="primary" @click="handleEnabled">Enable</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleHide () {
      this.$refs.generateForm.hide(['input', 'textarea'])
    },
    handleDisplay () {
      this.$refs.generateForm.display(['input', 'textarea'])
    },
    handleDisabled () {
      this.$refs.generateForm.disabled(['input', 'textarea'], true)
    },
    handleEnabled () {
      this.$refs.generateForm.disabled(['input', 'textarea'], false)
    }
  }
}
</script>

Bind Events To The Components ^1.4.0 version need

You can get the field component instance by getComponent(field identifier).

Bind a click event to a text box (input) :

View code

vue

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleAddEvent">Add Event</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleAddEvent () {
      this.$refs.generateForm.getComponent('input').$el.onclick = () => {
        this.$alert('You clicked me!', 'Alert')
      }
    }
  }
}
</script>

TIP

The components in the subform can be retrieved via getComponent(tableId.rowIndex.fieldId).

Add Custom Styles Dynamically

View code

vue

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleAdd">Add Style</el-button>
    <el-button type="primary" @click="handleRemove">Remove Style</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleAdd () {
      this.$refs.generateForm.addClassName(['input', 'textarea'], 'custom-style')
    },
    handleRemove () {
      this.$refs.generateForm.removeClassName(['input', 'textarea'], 'custom-style')
    }
  }
}
</script>

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

Set Form Validation Rules Dynamically

View code

vue

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
      @on-change="handleChange"
    >
    </fm-generate-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"switch","icon":"icon-switch","options":{"defaultValue":false,"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","disabled":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"width":"","customProps":{},"remoteFunc":"func_nr2wgjc8","remoteOption":"option_nr2wgjc8","tableColumn":false,"subform":false},"events":{"onChange":""},"name":"是否必填","key":"nr2wgjc8","model":"switch","rules":[]},{"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,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_uc1ogdma","remoteOption":"option_uc1ogdma","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"uc1ogdma","model":"input","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleChange (field, value) {
      if (field === 'switch') {
        if (value) {
          this.$refs.generateForm.setRules('input', [{required: true, message: 'Required'}])
          this.$refs.generateForm.setOptions('input', {required: true})
        } else {
          this.$refs.generateForm.setRules('input', [{required: false}])
          this.$refs.generateForm.setOptions('input', {required: false})
        }
      }
    }
  }
}
</script>

API

Property

Parameter	Description	Type	Default	Version
data	Form JSON configuration data	object	{}
value	Form Data	object	-
remote	A remote method of form configuration	object	{}
edit	Form editable state	boolean	true
remote-option	Configure the dynamic options of the form	object	{}
print-read	Print reading mode, form value text display	boolean	false	1.3.5

Events

Event Name	Description	Callback Arguments	Version
on-change	Triggered when form entry data changes	(field, value, data) field: Filed ID value: field data after changed data: Form Data

Methods

Youd can use this.$refs to get the instance of GenerateForm and invokes the instance method

Method Name	Description	Parameter	Version
getData	Gets the binding data for the form	(isValidate = true) => promise Passing false does not do form validation
reset	Reset Form Data	~~() => void~~ () => promise^1.6.0
setData	Set Form Data	~~({id: value}) => void~~ ({id: value}) => promise^1.6.0
hide	Hide form field	(fields: []) => void
display	Displays the hidden fields of the form	(fields: []) => void
disabled	Dynamically sets whether a form field is disabled	(fields: [], disabled: true \| false) => void
refresh	Refresh the form. Call this method to reload the form when the form JSON changes	~~() => void~~ () => promise^1.6.0
getValue	Get an input value for a field	(field) => value	1.3.1
getValues	Get all the input value for a field	() => object	1.3.1
sendRequest	Execute data source request	(name: Data source name, args: Data source arguments) => promise	1.4.0
getComponent	Get the field component instance in the form	(field: Field ID) => object \| array	1.4.0
addClassName	Add style class to the fields	(fields: [], className)
removeClassName	Remove style class from the fields	(fields: [], className)
setRules	Set the form field validation rules	(field, rules)	1.3.3
setOptions	For more field configurable property, you can refer to Field Configurable Property	(fields, options)	1.3.3
setOptionData	Dynamic option data assignment takes effect only when options.remote is true	(fields, newData)	1.4.0
refreshFieldDataSource	Refresh the data source data bound to the field	(field, args: Data source arguments)	1.4.0
getFieldDataSource	获取字段绑定的数据源值	(field: 字段标识)	^1.5.4
validate	Validation form field	(fields: []) => promise	1.4.0
triggerEvent	The js event that calls the form configuration	(eventName: Event name, args: Event arguments)	1.4.0
exportPDF	Export PDF, available when the form print-read property is true. reture Blob (type: "application/pdf")type file	() => promise	^1.5.8
openDialog	Open dialog box	(dialogId: Dialog box field identification)	^1.6.3
closeDialog	close dialogue box	(dialogId: Dialog box field identification)	^1.6.3

GenerateForm ​

Code Demonstration ​

Basic Usage ​

Load Form Data ​

Asynchronous Load Form ​

Listen for Form Data Changes ​

Dynamically Set Form to Disable/Hide ​

Bind Events To The Components ^1.4.0 version need ​

Add Custom Styles Dynamically ​

Set Form Validation Rules Dynamically ​

API ​

Property ​

Events ​

Methods ​

GenerateForm

Code Demonstration

Basic Usage

Load Form Data

Asynchronous Load Form

Listen for Form Data Changes

Dynamically Set Form to Disable/Hide

Bind Events To The Components ^1.4.0 version need

Add Custom Styles Dynamically

Set Form Validation Rules Dynamically

API

Property

Events

Methods