Ant Design 风格的表单生成器组件，使用方法同 GenerateForm。

代码演示

需要安装并引入 Ant Design Vue 3.x，详细请查看 Ant Design Vue 文档。

  1. import Antd from 'ant-design-vue'
  2. import 'ant-design-vue/dist/antd.css'
  4. app.use(Antd)
  1. <template>
  2.   <fm-generate-antd-form 
  3.    :data="jsonData"
  4.    ref="generateForm"></fm-generate-antd-form>
  5. </template>
  7. <script setup>
  8. import { ref } from 'vue'
  10. const generateForm = ref()
  12. 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_8v33jbbt","remoteOption":"option_8v33jbbt","tableColumn":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"8v33jbbt","model":"input_8v33jbbt","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_c9kajlpc","remoteOption":"option_c9kajlpc","tableColumn":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"c9kajlpc","model":"textarea_c9kajlpc","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_vz5y6qco","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_vz5y6qco","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"tableColumn":false},"events":{"onChange":""},"name":"单选框组","key":"vz5y6qco","model":"radio_vz5y6qco","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"antd","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""}],"dataSource":[{"key":"upload","name":"Get Upload Token","url":"https://tools-server.making.link/api/uptoken","method":"GET","auto":true,"responseFunc":"return res.uptoken;"},{"key":"getoptions","name":"Get Options","url":"https://tools-server.making.link/api/new/options","method":"GET","auto":true,"responseFunc":"return res.data;"}]}}
  13. </script>

API

同 GenerateForm API 。