簡單介紹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表單項的實踐的文章就介紹到這了。

原文來自：