</el-form-item>
</el-form>
</div>
</template>
<script>
/* eslint-disable */
export default {
data() {
return {
form: {
activityName: '',
status: '1',
productGroup: [{num:"",price:""}] },
rules: {
activityName: [
{ required: true, message: '请输入套餐名称', trigger: 'blur' }
] }
}
},
methods: {
deleteLadder(index)
{
if(this.form.productGroup.length>1){
this.form.productGroup.splice(index,1);
}
},
addLadder()
{
this.form.productGroup.push({num:"",price:""});
},
submitForm(formName)
{
console.log("activityName...",this.form.activityName);
this.$refs[formName].validate((valid,obj) => {
if (valid) {
this.submitFormAction();
} else {
this.$message.error("验证不通过");
}
});
},
submitFormAction()
{
this.$message.success("提交成功");
},
resetForm(formName)
{
this.$refs[formName].resetFields();
this.form.productGroup = [{num:"",price:""}];
}
}
}
</script>
<style>
.el-form-item {
margin-bottom: 20px;
}
</style>
首先是添加rules规则，这个和正常添加规则一样：
productGroupRules: {
productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],
productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]}
然后给表单项添加验证，以商品数量为例：
<el-form-item label="商品数量:" :prop="'productGroup.'+index+'.num'" :rules="productGroupRules.productGroupNum">
<el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>
</el-form-item>
注意这里
:rules是每个表单项都要添加，有多个的话用
productGroupRules.productGroupNum这样的形式区分，对应上面
productGroupRules里的内容。另外主要就是
:prop了，注意正常验证表单项是
prop，而这里是
:prop。
:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。另外就是要注意，v-for绑定的数组也必须绑定在form对象里，注意上面的data里：
