表单

<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>
Logo

前往低代码交流专区

更多推荐