vue:动态添加删除el-form-item并做rules校验

前端开发肯定会遇到这样一种场景: 要动态的增加或者减少form-item 并且需要对form-item做一些校验,比如必填校验 这个时候不能像我们之前开发那样把校验规则写在rules里面和el-form进行绑定,因为这些el-form-item是你动态渲染出来的

image.png

解决方案:

把rules直接写在el-form-item标签里面 同时要注意prop的写法 写你遍历的那个数组名+下标+校验的字段
此处如果发现不生效 检查下你的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>