关键:在prop后面添加rules判断
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="姓名" prop="name" :rules="ruleForm.pass ? rules.name:[{required:false}]">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass" :rules="ruleForm.name ? rules.pass:[{required:false}]">
<el-input v-model="ruleForm.pass"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
pass: '',
},
rules: {
name: [{ required: true, message: '姓名', trigger: 'blur' }],
pass: [{ required: true, message: '密码', trigger: 'change' }],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
动态添加的两个关联:
关键:在生成的数据添加两个布尔值(只能想到这么做了)
<template>
<el-form :model="ruleForm" ref="ruleForm" label-position="left">
<div class="relContent" v-for="(domain, index) in ruleForm.relationAos" :key="index">
<el-form-item label="企业名称" :prop="'relationAos.' + index + '.bankId'" :rules="{ validator: (rule, value, callback)=>{bankIdValidator(rule, value, callback,domain)}, trigger: 'change'}" style="display: inline-block;">
<el-select v-model="domain.bankId" clearable style="width: 92%;">
<el-option v-for="(item, index) in bankIdList" :key="index" :label="item.clientName" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="特殊(金额/万元)" :prop="'relationAos.' + index + '.dataValue'" :rules="{validator: (rule, value, callback)=>{dataValueValidator(rule, value, callback,domain)}, trigger: 'change'}" style="display: inline-block;margin-right: 5px;">
<el-input v-model.trim="domain.dataValue" clearable></el-input>
</el-form-item>
<div class="tabs-title">
<div class="add-icon">
<span class="el-icon-plus" @click="addDomain" v-if="index===0"></span>
<span class="el-icon-minus" @click.prevent="removeDomain(domain)" v-if="ruleForm.relationAos.length>1"></span>
</div>
</div>
</div>
<el-form-item>
<el-button type="primary" size="mini" @click="submitForm('ruleForm')">确 定</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
relationAos: [{ bankId: '', dataValue: '', requiredId: false, requiredValue: false }]
},
bankIdList: [
{ clientName: "1", id: 1 },
{ clientName: "2", id: 2 },
{ clientName: "3", id: 3 },
]
}
},
methods: {
bankIdValidator(rule, value, callback, domain) {
domain.requiredValue = value ? true : false
if (domain.requiredId) {
(!value) ? callback(new Error('请选择企业名称')) : callback()
} else {
callback()
}
},
dataValueValidator(rule, value, callback, domain) {
domain.requiredId = value ? true : false
if (domain.requiredValue) {
if (!value) {
callback(new Error('请输入金额'))
} else if (isNaN(value)) {
callback(new Error('请输入数字值'))
} else {
callback()
}
} else {
callback()
}
},
removeDomain(item) {
let index = this.ruleForm.relationAos.indexOf(item)
if (index !== -1) {
if (this.ruleForm.relationAos.length > 1) {
this.ruleForm.relationAos.splice(index, 1)
}
}
},
addDomain() {
this.ruleForm.relationAos.push({ bankId: '', dataValue: '', requiredId: false, requiredValue: false })
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('success!')
} else {
console.log('error submit!!');
return false;
}
});
},
},
}
</script>
<style scoped>
.el-form-item__content {
width: 214;
display: inline-block;
}
.tabs-title {
display: inline-block;
}
.light .tabs-title div span:last-child,
.drak .tabs-title div span:last-child {
margin-left: 0;
}
.el-dialog__body {
max-height: 600px;
overflow-y: auto;
}
</style>