題記:首先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)'>
<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>
到這里已經差不多就算完了,接下來就是加上提示語就行了如下圖
到此完美收工解決!!!基本上就這最后兩張圖的步驟!!!!第一張是效果圖!!!第一張是效果圖!!!第一張是效果圖!!!!!