vue怎么在一个页面里写两个表格_vue给多个el-table嵌套表单验证

表格中嵌套使用表单验证

表格是el-table自动获取的后台数据，每行都有el-input的验证，这样一个rules的规则就不能匹配到每一行，所以要是用动态的prop和rules规则

ref="contionsTable"

:data="list.activityGifts"

stripe

tooltip-effect="dark"

:header-cell-style="{background:'rgb(217, 224, 234)',color:'#606266'}"

border

>

:prop="'activityGifts.'+sort+'.'+scope.$index + '.giftInventory'"

:rules="rules.giftInventory"

>

:controls="false"

placeholder="请填写"

size="mini"

:min="1"

:precision="0"

class="w-100"

v-model="scope.row.giftInventory"

>

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:[]}]}

]

}

}

}