Vue ElementUi动态输入框（一行多列）表单（商品属性数量折扣等）的校验

题记：首先element文档给的required案列是单列输入框，使用场景不符合动态一行多列验证。找了很多资料才解决，使用场景如下图：商品的数量这一行全部必填，而且里面也有自己的填写规则。可增可减。

如果场景类似你就可以使用我这种方法亲测完美符合场景，测试小姐姐也没意见的那种哦。下面介绍使用方法代码奉上如下：

首先跟正常的官方文档单个输入框一致，区别点就在于2,3,4 那个数组

discountArr:[

{

start:"",

end:"",

disCount:""

}

],就是我在自己定义的完整一行所需要的，剩下的就是循环就好。

源代码如下

<el-form-item

label="商品数量："

size="mini"

:rules="{ required: true, message: '促销活动类型不能为空', trigger: 'blur'}"

v-for="(item,index) in addForm.discountArr" :key="index"

<el-col :span="24" >

<el-col :span="3">

<el-form-item :prop="'discountArr.' + index + '.start'"

:rules="discountArrRules.discountArrStart"> <el-input v-model="item.start" size="mini"></el-input></el-form-item>

</el-col>

<el-col :span="1" style="color:black;text-align:center;">——</el-col>

<el-col :span="3">

<el-form-item :prop="'discountArr.' + index + '.end'"

:rules="discountArrRules.discountArrEnd"> <el-input v-model="item.end" size="mini"></el-input></el-form-item>

</el-col>

<el-col :span="1" style="color:black;text-align:center;">件</el-col>

<el-col :span="2" style="color:black;text-align:center;">折扣：</el-col>

<el-col :span="2">

<el-form-item :prop="'discountArr.' + index + '.disCount'"

:rules="discountArrRules.discountArrDisCount"> <el-input v-model="item.disCount" size="mini"></el-input></el-form-item>

</el-col>

<el-col :span="2" style="color:black;text-align:center">% off</el-col>

<el-col :span="1"><el-button @click='deleteTime(index)'>

</el-button></el-col>

</el-col>

</el-form-item>

<el-form-item><el-col :span="24" size="mini"> <el-button @click="add()" size="mini">添加一列</el-button></el-col></el-form-item>

到这里已经差不多就算完了，接下来就是加上提示语就行了如下图

到此完美收工解决！！！基本上就这最后两张图的步骤！！！！第一张是效果图！！！第一张是效果图！！！第一张是效果图！！！！！

Vue ElementUi动态输入框（一行多列）表单（商品属性数量折扣等） 的校验