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

表格中嵌套使用表单验证表格是el-table自动获取的后台数据，每行都有el-input的验证，这样一个rules的规则就不能匹配到每一行，所以要是用动态的prop和rules规则ref="contionsTable":data="list.activityGifts"stripetooltip-effect="dark":header-cell-style="{background:'rgb(2

eventually7

5889人浏览 · 2021-02-05 00:18:41

eventually7 · 2021-02-05 00:18:41 发布

表格中嵌套使用表单验证

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

]

}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^