Vue+ElementUI动态切换验证规则(一)
表单<template><el-form :model="form" :rules="dynamicRules" ref="ref"><el-form-item prop="a"><el-input v-model="form.data1"></el-input></el-form-item><el-form-item
·
表单
<template>
<el-form :model="form" :rules="dynamicRules" ref="ref">
<el-form-item prop="a">
<el-input v-model="form.data1"></el-input>
</el-form-item>
<el-form-item prop="b">
<el-input v-model="form.data2"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit">提交</el-button>
</el-form-item>
</el-form>
</template>
脚本
<script>
export default {
data () {
return {
// 判断条件
condition:true,
// 表单数据
form:{
data1:'',
data2:''
},
rule1:{
a: [
{ required: true, message: '请输入a', trigger: 'blur' }
]
},
rule2:{
b: [
{ required: true, message: '请输入b', trigger: 'blur' }
]
}
}
},
computed:{
// 动态切换验证规则
dynamicRules() {
return this.condition === true ? this.rule1: this.rule2;
}
},
methods:{
submit(){
this.condition = !this.condition;
console.log(this.$refs.ref.rules);
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)