13518219792
这篇文章给大家介绍使用Vue怎么生成一个动态表单，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
成都创新互联公司专注于临邑网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供临邑营销型网站建设，临邑网站制作、临邑网页设计、临邑网站官网定制、小程序制作服务，打造临邑网络公司原创品牌,更为您提供临邑网站排名全网营销落地服务。
数据接口设计
预备创建表单接口（其中字段解释说明）：
id
name
type
title
prompt_msg
selectObj
{
"code": 0,
"msg": "success",
"data": {
"list": [{
"id": 10,
"name": "check_type",
"type": "select_item",
"title": "审核类型",
"prompt_msg": "请填写审核类型",
"selectObj": [{
"id": 1,
"item": "预审核"
}, {
"id": 2,
"item": "患者审核"
}],
"val": null,
"rank": 0
}, {
"id": 16,
"name": "bank_branch_info",
"type": "string",
"title": "支行信息",
"prompt_msg": "请填写支行信息",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 19,
"name": "project_content",
"type": "multiple",
"title": "项目内容",
"prompt_msg": "请填写项目内容",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 22,
"name": "project_extension_time",
"type": "integer",
"title": "项目延长时间",
"prompt_msg": "请填写项目延长时间",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 24,
"name": "images",
"type": "images",
"title": "图片",
"prompt_msg": "请上传图片",
"selectObj": null,
"val": null,
"rank": 0
}]
}
}通过Vue动态组件渲染表单
现在预备创建表单接口文档都了，该怎么渲染动态表单呢？动态表单的元素类型有5类，按照这个类别创建五个元素组件。
1. 上传图片组件
上传图片组件这里使用了 Uploader 组件。