前端開(kāi)發(fā)肯定會(huì)遇到這樣一種場(chǎng)景: 要?jiǎng)討B(tài)的增加或者減少form-item 并且需要對(duì)form-item做一些校驗(yàn),比如必填校驗(yàn) 這個(gè)時(shí)候不能像我們之前開(kāi)發(fā)那樣把校驗(yàn)規(guī)則寫(xiě)在rules里面和el-form進(jìn)行綁定,因?yàn)檫@些el-form-item是你動(dòng)態(tài)渲染出來(lái)的

image.png

解決方案:

把rules直接寫(xiě)在el-form-item標(biāo)簽里面 同時(shí)要注意prop的寫(xiě)法 寫(xiě)你遍歷的那個(gè)數(shù)組名+下標(biāo)+校驗(yàn)的字段
此處如果發(fā)現(xiàn)不生效 檢查下你的prop里面的數(shù)組是不是寫(xiě)錯(cuò)了 不能寫(xiě)ruleForm.billingBindMeals 而應(yīng)該直接寫(xiě)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: '請(qǐng)選擇商品進(jìn)行綁定', 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>