vue.js如何根据数据格式动态生成表单?可以借用vue全家桶

樊林峰
  • 122

后台数据如下,我需要根据key对应的value的数据类型来判断表单的类型
clipboard.png
1.如果key对应的为字符串,那我就取出后4位,如果是 ‘.mp3’或者‘.png’文件的话,就给一个上传的页面

clipboard.png
2.如果是字符串,后几位不是‘.mp3’或者‘.png’那就给一个input

clipboard.png

有可能层级嵌套,所以我采用的vue的递归组件方法,现在数据已经被递归出来,但是无法进行双向绑定。不知哪位有解决的思路

我的代码:
递归组件为<recursive-config> </recursive-config>
父级调用:
clipboard.png
递归调用(自己调用自己):

clipboard.png
递归组件js:

clipboard.png

回复
阅读 4k
2 个回答

可以使用form-create动态生成表单,form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单动态生成组件。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。github地址

目前以支持如下 UI

ElementUI 版本

npm i @form-create/element-ui

Iview 版本 2.x|3.x

npm i @form-create/iview

Iview 版本 4.x

npm i @form-create/iview4

Ant-design-vue 版本 1.5.3+

npm i @form-create/ant-design-vue

宣传栏