前端开发肯定会遇到这样一种场景: 要动态的增加或者减少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>
