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

為瑪多等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及瑪多網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、成都做網(wǎng)站、瑪多網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

id
name
type
title
prompt_msg
selectObj

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

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

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

1. 上傳圖片組件

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

<template>
  <div class="default images">
    <div class="lable">{{ item.title }}</div>
    <div v-if="item.val === null" class="content">
      <Uploader 
        :max-num="8"
        :user-imgs="project_image"
        @change="onUploadProject"
      />
    </div>
    <div v-else class="img-wrap">
      <img v-for="(it, idx) in item.val" :src="it" :key="idx" @click="preview(idx, item.val)">
    </div>
  </div>
</template>

2. 多行輸入框組件

默認多行輸入框為3行

<template>
  <div v-if="item" class="default multiple">
    <div class="lable">{{ item.title }}</div>
    <template>
      <textarea
        rows="3" 
        :placeholder="item.prompt_msg" 
        v-model="value" 
        :value="it.item">
    </template>
  </div>
</template>

3. 下拉選擇框組件

使用了element-ui的 el-select

<template>
  <div v-if="item" class="default select_item">
    <div class="lable select-lable">{{ item.title }}</div>
    <div class="content">
      <el-select
        v-model="value" 
        placeholder="請選擇類型" 
        class="el-select-wrap" 
        size="mini"
        @change="onChangeFirstValue"
      >
        <el-option
          v-for="it in item.selectObj"
          :key="it.id"
          :label="it.item"
          :value="it.item">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

其它兩個數(shù)字單行輸入框組件、文本單輸入框組件跟多行輸入框組件類似。

組件都創(chuàng)建好了，為了方便統(tǒng)一管理這些自定義組件。將組件們引入再導(dǎo)出，通過export default復(fù)合的形式。

// 單行文本輸入框組件
export { default as String } from './string.vue' 
// 單行數(shù)字輸入框組件
export { default as Integer } from './integer.vue' 
// 多行文本輸入框組件
export { default as Multiple } from './multiple.vue' 
// 下拉列表選擇器組件
export { default as Select_item } from './select_item.vue' 
// 上傳圖片組件
export { default as Images } from './images.vue'

再動態(tài)表單頁面統(tǒng)一引入，以Vue動態(tài)組件的形式進行渲染， is 屬性為動態(tài)組件名。

<template>
  <div class="g-container">
    <component 
      v-for="(item, number) in freedomConfig" 
      :key="item.name"
      :is="item.type" 
      :item="item" 
      :number="number" 
      @changeComponent="changeComponentHandle"
    ></component>
  </div>
</template>

<script>
  import * as itemElements from '../../components/itemElement'
  
  export default {
    components: itemElements,
  }
</script>

上面完成后，動態(tài)表單展現(xiàn)出來了。表單是動態(tài)生成的，如何進行表單驗證，和表單數(shù)據(jù)的匯總呢？

表單數(shù)據(jù)匯總

再動態(tài)渲染組件的，傳入了 number 參數(shù)，這個參數(shù)用來標(biāo)識當(dāng)前組件位于動態(tài)表單的第幾個，方便后期填入數(shù)據(jù)后，進行數(shù)據(jù)保存。

默認value屬性值為空，對value進行監(jiān)聽，當(dāng)value變動的時 候進行emit，告訴父組件數(shù)據(jù)變更了，請保存。

data() {
  return {
    value: ''
  }
},
watch: {
  value(v, o) {
    this.throttleHandle(() => {
      this.$emit('changeComponent', {
        number: this.number,
        value: this.$data.value
      })
    })
  }
},

但是數(shù)據(jù)保存到哪里？怎么保存呢？ 讓后端給一個表單全部字段的接口，取到數(shù)據(jù)存到data中，每次數(shù)據(jù)更新就去查找是否存在這個字段，有的話就賦值保存起來。后面提交的時候，就提交這個對象。

表單校驗

提交的時候，希望用戶能夠把表單填完再調(diào)用提交接口，需要前端校驗是否填完沒有的話，就給響應(yīng)的toast請?zhí)崾?，阻止表單提交?/p>

this.checkFrom(freedomConfig, preWordorderData).then(canSubmit => {
  canSubmit && postSubmitWorkorder(preWordorderData).then(res => {
    if (res.code === 0) {
      showLoading()
      this.$router.push(`/detail/${res.data.id}`)
    }
  })
})

checkFrom 為我們的校驗方法，循環(huán)遍歷預(yù)創(chuàng)建表單，從data里查看該字段是否有值，沒有的話就給于toast提示。并返回一個promise， resolve(false) 。如果都校驗通過返回 resolve(true) 。這樣就可以使checkFrom成為一個異步函數(shù)。

其中需要注意的是下拉框選擇后的值為大于0的數(shù)字、上傳圖片的屬性值是數(shù)組。

一個動態(tài)表單的創(chuàng)建、校驗、數(shù)據(jù)整合就完成了。很多時候需要寫大量代碼的場景思路上很簡單，反倒是抽象一個組件需要考慮的更多。

關(guān)于使用Vue怎么生成一個動態(tài)表單就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：使用Vue怎么生成一個動態(tài)表單-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://aaarwkj.com/article46/pigeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、面包屑導(dǎo)航、全網(wǎng)營銷推廣、服務(wù)器托管、網(wǎng)站導(dǎo)航、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)