簡單介紹v-for中動態校驗el-form表單項的實踐

大雄45發表於2022-06-05
導讀 在專案開發中,我們經常會遇到表單儲存的功能,本文主要介紹了v-for中動態校驗el-form表單項的實踐,文中透過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

問題描述

在專案開發中,我們經常會遇到表單儲存的功能,在表單儲存前,常常需要做表單必填項的校驗,校驗透過以後才去發請求儲存表單資料。

但是,這個表單如果是動態的,即:可以新增相同的表單。比如這個表單有輸入框和下拉框需要校驗,點選新增表格按鈕,再新增一個相同的表單,同樣新的這個表單對應的輸入框和下拉框也需要校驗。

本文記錄一下對應程式碼寫法思路,我們先看一下效果圖:

效果圖

簡單介紹v-for中動態校驗el-form表單項的實踐簡單介紹v-for中動態校驗el-form表單項的實踐

程式碼思路

表單的主資料是要寫成物件形式 :model="ruleForm" 不過既然是要動態的,肯定是要迴圈呢,所以,可以寫成這樣:

ruleForm: {         // 動態迴圈項陣列         formItemArr: [           {             name: "",             gender: "",           },         ],       },

點選新增表格的時候,就可以直接push對應項就行啦,即,這樣:

// 新增一個表格     addForm () {       let itemObj = {         name: "",         gender: "",       };       this .ruleForm.formItemArr.push(itemObj);     },

重點來嘍,因為是迴圈的,所以prop也要變成動態的了,要拼接上index,就變成根據索引去找對應的校驗項了,即為::prop="'formItemArr.' + index + '.name'" ,這樣的話,就變成了:prop="formItemArr.0.name"、prop="formItemArr.1.name"、prop="formItemArr.2.name" ... 這樣的話,就可以照顧到每一項中的每一個繫結的值了,校驗就不會漏掉

校驗規則寫成內聯就可以觸發校驗函式this.$refs["ruleForm"].validate((val) => {})了

< el-form-item           label="姓名"           :prop="'formItemArr.' + index + '.name'"           :rules="{             required: true,             message: '請填寫',             trigger: 'blur',           }"         >         ......

完整程式碼

演示的話,大家直接複製貼上即可

< template>   < div>     < el-button @click="addForm" size="mini" type="primary" plain       >新增表格< /el-button     >     < el-button @click="saveForm" size="mini" type="primary" plain       >儲存表格< /el-button     >     < br />     < br />     < el-form       :model="ruleForm"       ref="ruleForm"       label-width="100px"     >       < div         v-for="(item, index) in ruleForm.formItemArr"         :key="index"       >         < el-form-item           label="姓名"           :prop="'formItemArr.' + index + '.name'"           :rules="{             required: true,             message: '請填寫',             trigger: 'blur',           }"         >           < el-input             size="mini"             v-model.trim="item.name"             placeholder="請填寫"             style="width: 200px"           >< /el-input>         < /el-form-item>         < el-form-item           label="性別"           :prop="'formItemArr.' + index + '.gender'"           :rules="{             required: true,             message: '請選擇',             trigger: 'change',           }"         >           < el-select             clearable             size="mini"             v-mo del="item.gender"             place holder="請選擇"           >             < el-option label="男" value="男">< /el-option>             < el-option label="女" value="女">< /el-option>           < /el-select>         < /el-form-item>       < /div>     < /el-form>   < /div> < /template>   < script> export default {   data() {     return {       ruleForm: {         // 動態迴圈項陣列         formItemArr: [           {             name: "",             gender: "",           },         ],       },     };   },   met hods: {     // 新增一個表格     add Form() {       let ite mObj = {         name: "",         gender: "",       };       this.rule Form.form Item Arr.push(itemObj);     },     // 儲存表格     save Form() {       this .$refs["ruleForm"].validate((val) => {         if (val) {           con sole.log("符合要求,儲存成功", this.ruleForm);         } else {           cons ole.log("error submit!!");           re turn false;         }       });     },   }, }; < /script>   < style scoped> . box {   wi dth: 100%;   hei ght: 100%;   box -sizing: border-box;   pad ding: 24px;   .for mform {     wi dth: 360px;     .for mformItemClass {       pa dding-top: 24px;       bo rder: 2px dashed #ccc;       ma rgin-bottom: 18px;     }   } } < /style>

到此這篇關於v-for中動態校驗el-form表單項的實踐的文章就介紹到這了。

原文來自:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2898789/,如需轉載,請註明出處,否則將追究法律責任。

相關文章