vue+elementUI動態(tài)增加表單項并添加驗證的代碼詳解
更新時間：2020年12月17日 10:52:15 作者：不吃肉的羊
這篇文章主要介紹了vue+elementUI動態(tài)增加表單項并添加驗證的代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
參考elementUI官網(wǎng)以及網(wǎng)上的其他一些資料。話不多說，直接貼代碼。
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>
實現(xiàn)效果:單個時
多個時顯示刪除按鈕
到此這篇關于vue+elementUI動態(tài)增加表單項并添加驗證的代碼詳解的文章就介紹到這了,更多相關vue+elementUI增加表單項內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue使用webPack打包發(fā)布后頁面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue中button標簽樣式和功能禁用的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vant如何實現(xiàn)Collapse折疊面板標題自定義
這篇文章主要介紹了vant如何實現(xiàn)Collapse折疊面板標題自定義，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue路由跳轉傳參或者打開新頁面跳轉問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題
這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
由于 Vue 會在初始化實例時進行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進行上述過程 ，這樣才能讓它是響應的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下2023-02-02
v-model通常用于input的雙向數(shù)據(jù)綁定,它并不會向子組件傳遞數(shù)據(jù),下面這篇文章主要給大家介紹了關于vue2和vue3組件v-model區(qū)別的相關資料,需要的朋友可以參考下2023-06-06
element-ui中導航組件menu的一個屬性:default-active說明
這篇文章主要介紹了element-ui中導航組件menu的一個屬性:default-active說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中實現(xiàn)子組件接收父組件方法并獲取返回值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文通過實例代碼給大家介紹了vue仿百度搜索功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-02-02