前端開發(fā)肯定會遇到這樣一種場景: 要動態(tài)的增加或者減少form-item 并且需要對form-item做一些校驗,比如必填校驗 這個時候不能像我們之前開發(fā)那樣把校驗規(guī)則寫在rules里面和el-form進行綁定,因為這些el-form-item是你動態(tài)渲染出來的

image.png

解決方案:

把rules直接寫在el-form-item標簽里面 同時要注意prop的寫法 寫你遍歷的那個數組名+下標+校驗的字段
此處如果發(fā)現不生效 檢查下你的prop里面的數組是不是寫錯了 不能寫ruleForm.billingBindMeals 而應該直接寫billingBindMeals

 <div class="set" v-for="(item, index) in ruleForm.billingBindMeals" :key="index">
              //刪除按鈕
              <svg-icon icon-class="delete" class="close" @click="deleteMeal(index)" />
              <el-form-item
                :prop="'billingBindMeals.' + index + '.mealName'"
                label="綁定商品"
                label-width="80px"
                :rules="{ required: true, message: '請選擇商品進行綁定', trigger: ['blur', 'change'] }"
              >
                <el-select v-model="item.mealName">
                  <el-option
                    v-for="item in packageList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>