快捷導(dǎo)航

vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼詳解

更新時(shí)間：2020年12月17日 10:52:15 作者：不吃肉的羊

這篇文章主要介紹了vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

參考elementUI官網(wǎng)以及網(wǎng)上的其他一些資料。話不多說(shuō)，直接貼代碼。
htmt部分：

<div id="app" style="width: 500px;">
        <el-form :model="environmentForm" ref="environmentForm">
            <el-row :gutter="24" v-for="(item, index) in environmentForm.items" :key="item.key">
                <el-col :span="6">
                    <el-form-item :prop="'items.' + index + '.name'"
                        :rules="{required: true, message: '名稱不能為空', trigger: 'blur'}">
                        <el-input v-model="item.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item :prop="'items.' + index + '.variable'"
                        :rules="{required: true, message: '變量值不能為空', trigger: 'blur'}">
                        <el-input v-model="item.variable"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3" v-if="environmentForm.items.length !== 1">
                    <el-button @click="removeEnvironmentForm(item)" class="el-icon-delete" size="mini" circle>
                    </el-button>
                </el-col>
                <el-col :span="3">
                    <el-button @click="addEnvironmentForm" size="mini" class="el-icon-plus" circle></el-button>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm('environmentForm')">提交</el-button>
                <el-button @click="resetForm('environmentForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

實(shí)現(xiàn)效果:單個(gè)時(shí)

多個(gè)時(shí)顯示刪除按鈕

到此這篇關(guān)于vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼詳解的文章就介紹到這了,更多相關(guān)vue+elementUI增加表單項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

手寫實(shí)現(xiàn)vue2下拉菜單dropdown組件實(shí)例
這篇文章主要為大家介紹了手寫vue2下拉菜單dropdown組件實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue v-on監(jiān)聽(tīng)事件詳解
這篇文章主要為大家詳細(xì)介紹了vue v-on監(jiān)聽(tīng)事件的相關(guān)資料，Vue.js中的監(jiān)聽(tīng)事件是如何處理的，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)
本文主要介紹了vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
vue中使用GraphQL的實(shí)例代碼
這篇文章主要介紹了vue中使用GraphQL的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-11-11
vue.js項(xiàng)目使用原生js實(shí)現(xiàn)移動(dòng)端的輪播圖
這篇文章主要為大家介紹了vue.js項(xiàng)目中使用原生js實(shí)現(xiàn)移動(dòng)端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
Vue.use與Vue.prototype的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue動(dòng)畫事件詳解及過(guò)渡動(dòng)畫實(shí)例
通過(guò) Vue.js 的過(guò)渡系統(tǒng)，可以在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過(guò)渡效果。Vue.js 會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為你觸發(fā) CSS 過(guò)渡或動(dòng)畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過(guò)渡過(guò)程中執(zhí)行自定義的 DOM 操作
2019-02-02
vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
一文掌握Pinia使用及數(shù)據(jù)持久化存儲(chǔ)超詳細(xì)教程
這篇文章主要介紹了Pinia安裝使用及數(shù)據(jù)持久化存儲(chǔ)的超詳細(xì)教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guān)修改問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guān)修改問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07