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)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
- vue elementUI 表單嵌套驗(yàn)證的實(shí)例代碼
- vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
- vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例
- vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
- Vue ElementUI之Form表單驗(yàn)證遇到的問(wèn)題
- vue+elementUI用戶修改密碼的前端驗(yàn)證規(guī)則
相關(guān)文章
vue使用webPack打包發(fā)布后頁(yè)面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁(yè)面顯示空白的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義
這篇文章主要介紹了vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue路由跳轉(zhuǎn)傳參或者打開新頁(yè)面跳轉(zhuǎn)問(wèn)題
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參或者打開新頁(yè)面跳轉(zhuǎn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題
這篇文章主要介紹了vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
由于 Vue 會(huì)在初始化實(shí)例時(shí)進(jìn)行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對(duì)屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對(duì)象上存在時(shí)才能進(jìn)行上述過(guò)程 ，這樣才能讓它是響應(yīng)的，這篇文章主要介紹了Vue中$set()的使用方法場(chǎng)景分析,需要的朋友可以參考下2023-02-02
v-model通常用于input的雙向數(shù)據(jù)綁定,它并不會(huì)向子組件傳遞數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue2和vue3組件v-model區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明
這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值
這篇文章主要介紹了vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文通過(guò)實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-02-02