表格中嵌套使用表单验证
表格是el-table自动获取的后台数据,每行都有el-input的验证,这样一个rules的规则就不能匹配到每一行,所以要是用动态的prop和rules规则
<el-form :rules="rules">
<div v-for="(list,sort) in activityRulesList">
<el-table
ref="contionsTable"
:data="list.activityGifts"
stripe
tooltip-effect="dark"
:header-cell-style="{background:'rgb(217, 224, 234)',color:'#606266'}"
border
>
<el-table-column label="赠品库存" align="center">
<template slot-scope="scope">
<el-form-item
:prop="'activityGifts.'+sort+'.'+scope.$index + '.giftInventory'"
:rules="rules.giftInventory"
>
<el-input-number
:controls="false"
placeholder="请填写"
size="mini"
:min="1"
:precision="0"
class="w-100"
v-model="scope.row.giftInventory"
></el-input-number>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
<script>
export default{
data(){
const validGiftInventory = (rule, value, callback) => {
// console.log(rule,value,callback);
let ruleIndex = rule.field.split(".")[1];
let rowIndex = rule.field.split(".")[2];
let giftInventory = this.activityRulesList[ruleIndex].activityGifts[rowIndex].giftInventory;
if(!giftInventory){
callback(new Error("不能为空"));
}
else{
callback();
}
};
return{
rules: {
giftInventory: {
validator: validGiftInventory,
required: true,
trigger: "blur"
}
},
activityRulesList:[
{ruleId:0,activityGifts:[{id:0,giftInventory:[]}]},
{ruleId:1,activityGifts:[{id:0,giftInventory:[]}]}
]
}
}
}
</script>
网友评论