求大神一个关于VUE v-for 验证的问题
发布网友
发布时间：2022-04-23 08:49
共1个回答
热心网友
时间：2022-04-20 01:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-form ref="ruleForm" :model="gift.distributionConfig.data">
<el-col :span="12" v-for="(i,index) in gift.distributionConfig.data" :key="index">
<el-form-item label="价格">
<el-input v-model="i.price"><template slot="prepend">￥</template></el-input>
</el-form-item>
<el-form-item label="奖励：" :prop="'ePercent' + index" style="margin-bottom: 15px"
:rules="ePercentRules(index)">
<el-input v-model="i.ePercent"><template slot="prepend">%</template></el-input>
</el-form-item>
</el-col>
</el-form>
<button @click="submit('ruleForm')">提交</button>
</div>
</body>
<script src="https://lib.baomitu.com/vue/2.6.12/vue.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
<script>
var Main = {
data() {
return {
gift: {
distributionConfig: {
proctCategory: 1,
data: {
1: {
level: 1,
price: "",
ePercent: "",
},
2: {
level: 2,
price: "",
ePercent: "",
},
},
},
},
};
},
created() { },
methods: {
ePercentRules(index) {
return [{
validator: (rule, value, callback) => {
let num = parseInt(rule.field.slice(10))
console.log(num);
if (this.gift.distributionConfig.data[num].price < this.gift.distributionConfig.data[num].ePercent) {
callback(new Error('奖励不得高于价格'));
} else {
callback();
}
}, trigger: "blur"
}]
},
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");
</script>
</html>
请采纳
