使用Vue怎么生成一個(gè)動(dòng)態(tài)表單

這篇文章給大家介紹使用Vue怎么生成一個(gè)動(dòng)態(tài)表單，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司專注于臨邑網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供臨邑營(yíng)銷型網(wǎng)站建設(shè)，臨邑網(wǎng)站制作、臨邑網(wǎng)頁(yè)設(shè)計(jì)、臨邑網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造臨邑網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨邑網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

數(shù)據(jù)接口設(shè)計(jì)

預(yù)備創(chuàng)建表單接口（其中字段解釋說(shuō)明）：

id
name
type
title
prompt_msg
selectObj

{
 "code": 0,
 "msg": "success",
 "data": {
 "list": [{
  "id": 10,
  "name": "check_type",
  "type": "select_item",
  "title": "審核類型",
  "prompt_msg": "請(qǐng)?zhí)顚憣徍祟愋?,
  "selectObj": [{
  "id": 1,
  "item": "預(yù)審核"
  }, {
  "id": 2,
  "item": "患者審核"
  }],
  "val": null,
  "rank": 0
 }, {
  "id": 16,
  "name": "bank_branch_info",
  "type": "string",
  "title": "支行信息",
  "prompt_msg": "請(qǐng)?zhí)顚懼行畔?,
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 19,
  "name": "project_content",
  "type": "multiple",
  "title": "項(xiàng)目?jī)?nèi)容",
  "prompt_msg": "請(qǐng)?zhí)顚戫?xiàng)目?jī)?nèi)容",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 22,
  "name": "project_extension_time",
  "type": "integer",
  "title": "項(xiàng)目延長(zhǎng)時(shí)間",
  "prompt_msg": "請(qǐng)?zhí)顚戫?xiàng)目延長(zhǎng)時(shí)間",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 24,
  "name": "images",
  "type": "images",
  "title": "圖片",
  "prompt_msg": "請(qǐng)上傳圖片",
  "selectObj": null,
  "val": null,
  "rank": 0
 }]
 }
}

通過(guò)Vue動(dòng)態(tài)組件渲染表單

現(xiàn)在預(yù)備創(chuàng)建表單接口文檔都了，該怎么渲染動(dòng)態(tài)表單呢？動(dòng)態(tài)表單的元素類型有5類，按照這個(gè)類別創(chuàng)建五個(gè)元素組件。

1. 上傳圖片組件

上傳圖片組件這里使用了 Uploader 組件。

2. 多行輸入框組件

默認(rèn)多行輸入框?yàn)?行