VueElementUi动态输⼊框（⼀⾏多列）表单（商品属性数量折
扣等）的校验
题记：⾸先element⽂档给的required案列是单列输⼊框，使⽤场景不符合动态⼀⾏多列验证。了很多资料才解决，使⽤场景如下图：商品的数量这⼀⾏全部必填，⽽且⾥⾯也有⾃⼰的填写规则。可增可减。
如果场景类似你就可以使⽤我这种⽅法亲测完美符合场景，测试⼩也没意见的那种哦。下⾯介绍使⽤⽅法代码奉上如下：
elementui登录界面
⾸先跟正常的官⽅⽂档单个输⼊框⼀致，区别点就在于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" >——</el-col>
<el-col :span="3">
<el-form-item  :prop="'discountArr.' + index + '.end'"
:rules="discountArrRules.discountArrEnd"> <el-input v-model="d" size="mini"></el-input></el-form-item>
</el-col>
<el-col :span="1" >件</el-col>
<el-col :span="2" >折扣：</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" >% off</el-col>
<el-col :span="1"><el-button @click='deleteTime(index)'>
<i class="el-icon-minus"></i>
</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>到这⾥已经差不多就算完了，接下来就是加上提⽰语就⾏了如下图
到此完美收⼯解决基本上就这最后两张图的步骤！第⼀张是效果图第⼀张是效果图第⼀张是效果图！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。