GenerateAntdForm

The Ant Design-style form builder component works the same way as GenerateForm.

Code Demonstration

Ant Design Vue needs to be installed and imported.

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

<template>
  <div>
    <fm-generate-antd-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-antd-form>
    <a-button type="primary" @click="handleSubmit">Submit</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1606985346881","remoteOption":"option_1606985346881"},"name":"单行文本","key":"1606985346881","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":true,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1606985347510","remoteOption":"option_1606985347510"},"name":"多行文本","key":"1606985347510","model":"text","rules":[{"required":true,"message":"必须填写"}]},{"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":true,"requiredMessage":"","width":"","remote":false,"remoteType":"option","remoteOption":"option_1606985348093","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1606985348093","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1606985348093","model":"radio","rules":[{"required":true,"message":"必须填写"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"antd","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false}},
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    }
  }
}
</script>

API

Please refer to GenerateForm API.