微客导航 » 文章资讯 » 使用Vue生成动态表单

使用Vue生成动态表单

2023-08-07 09:54:04 360

开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，心里知道要这样搞不得把自己累死，首先表单居多，还会有变更，以后维护起来也让人心力憔悴。

于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端自行开发，我要处理的部分是动态生成表单，展现提交的表单，以及对表单的处理情况。

数据接口设计

表单类型的接口就不用说了，这个比较简单。我跟后端约定了一个预备创建工单接口，这个接口是后端告知前端，需要生成一个什么样的表单。

预备创建表单接口（其中字段解释说明）：

id
name
type
thttp://dh.wk163.comitle
prompt_msg
selectObj

{
"code":0,
"msg":"success",
"data":{
"list":[{
"id":10,
"name":"check_type",
"type":"select_http://dh.wk163.comitem",
"thttp://dh.wk163.comitle":"审核类型",
"prompt_msg":"请填写审核类型",
"selectObj":[{
"id":1,
"http://dh.wk163.comitem":"预审核"
},{
"id":2,
"http://dh.wk163.comitem":"患者审核"
}],
"val":null,
"rank":0
},{
"id":16,
"name":"bank_branch_info",
"type":"string",
"thttp://dh.wk163.comitle":"支行信息",
"prompt_msg":"请填写支行信息",
"selectObj":null,
"val":null,
"rank":0
},{
"id":19,
"name":"project_content",
"type":"multiple",
"thttp://dh.wk163.comitle":"项目内容",
"prompt_msg":"请填写项目内容",
"selectObj":null,
"val":null,
"rank":0
},{
"id":22,
"name":"project_extension_time",
"type":"integer",
"thttp://dh.wk163.comitle":"项目延长时间",
"prompt_msg":"请填写项目延长时间",
"selectObj":null,
"val":null,
"rank":0
},{
"id":24,
"name":"images",
"type":"images",
"thttp://dh.wk163.comitle":"图片",
"prompt_msg":"请上传图片",
"selectObj":null,
"val":null,
"rank":0
}]
}
}

通过Vue动态组件渲染表单

现在预备创建表单接口文档都了，该怎么渲染动态表单呢？动态表单的元素类型有5类，按照这个类别创建五个元素组件。

1.上传图片组件

上传图片组件这里使用了 Uploader组件。

2.多行输入框组件

默认多行输入框为3行