使用Vue生成動態(tài)表單的示例代碼

更新時間：2024年03月12日 09:13:55 作者：尤小小

這篇文章主要為大家詳細介紹了如何使用Vue生成動態(tài)表單,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

需求背景

開需求會了，產(chǎn)品說這次需求的表單比較多，目前有19個，后期的表單可能會有增加、修改。我作為這次的前端開發(fā)，看到這樣的需求，心里知道要這樣搞不得把自己累死，首先表單居多，還會有變更，以后維護起來也讓人心力憔悴。

于是我提議做動態(tài)表單，做一個表單的配置系統(tǒng)，在系統(tǒng)里配置表單類型、表單得字段、以及對表單得管理。后來重新評審了需求，系統(tǒng)部分由后端自行開發(fā)，我要處理的部分是動態(tài)生成表單，展現(xiàn)提交的表單，以及對表單的處理情況。

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

表單類型的接口就不用說了，這個比較簡單。我跟后端約定了一個預(yù)備創(chuàng)建工單接口，這個接口是后端告知前端，需要生成一個什么樣的表單。

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

id 表單字段的id
name 表單字段的名稱（存數(shù)據(jù)庫的字段名）
type 表單字段的類型（select_item下拉列表、string單行文本、multiple多行文本、integer單行數(shù)字、images上傳圖片）
title 表單字段的中文名（動態(tài)表單的字段名稱）
prompt_msg 表單字段的placeholder文案
selectObj type類型為select_item的時候，selectObj有值，默認為null

{
    "code": 0,
    "msg": "success",
    "data": {
        "list": [{
            "id": 10,
            "name": "check_type",
            "type": "select_item",
            "title": "審核類型",
            "prompt_msg": "請?zhí)顚憣徍祟愋?,
            "selectObj": [{
                "id": 1,
                "item": "預(yù)審核"
            }, {
                "id": 2,
                "item": "患者審核"
            }],
            "val": null,
            "rank": 0
        }, {
            "id": 16,
            "name": "bank_branch_info",
            "type": "string",
            "title": "支行信息",
            "prompt_msg": "請?zhí)顚懼行畔?,
            "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ù)整合就完成了。很多時候需要寫大量代碼的場景思路上很簡單，反倒是抽象一個組件需要考慮的更多。

以上就是使用Vue生成動態(tài)表單的示例代碼的詳細內(nèi)容，更多關(guān)于Vue生成動態(tài)表單的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: