Select选择是,规则加载,选择否,取消规则


<template>
<div>
活动名称是否必填:<el-select v-model="value" placeholder="请选择" @change="change">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "选项1",
label: "是"
},
{
value: "选项2",
label: "否"
}
],
value: "",
ruleForm: {
name: ""
},
rules: {
name: []
}
};
},
methods: {
change() {
this.$refs["ruleForm"].resetFields();
if (this.value == "选项1") {
this.$set(this.rules, "name", {
required: true,
message: "请输入活动名称",
trigger: "blur"
});
} else {
this.$set(this.rules, "name", {});
}
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
}
}
};
</script>