表单校验（选择下拉框，input变化不影响校验）

表单校验（选择下拉框，input变化不影响校验）
选择下拉框时类型不同，但是可以只在当前类型中点击“⽴即创建”，不影响下⼀类型的校验
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="类型" prop="region">
<el-select v-model="ruleForm.region" @change="clickOption">
<el-option
v-for="item in optionList"
:key="item.value"
:label="bel"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<div v-if="ruleForm.region == 1"> // 判断
<el-form-item label="账户" prop="zhang">
<el-input
type="text"
v-model="ruleForm.zhang"
></el-input> </el-form-item
><el-form-item label="名称" prop="ming">
<el-input type="text" v-model="ruleForm.ming"></el-input>
</el-form-item>
<el-form-item label="科⽬" prop="kemu">
<el-input type="text" v-model="ruleForm.kemu"></el-input>
</el-form-item>
</div>
<div v-if="ruleForm.region == 2"> // 判断
<el-form-item label="编码" prop="bian">
<el-input
type="text"
v-model="ruleForm.bian"
></el-input> </el-form-item
><el-form-item label="称号" prop="yin">
<el-input type="text" v-model="ruleForm.yin"></el-input>
</el-form-item>
<el-form-item label="挂掉" prop="dui">
<el-input type="text" v-model="ruleForm.dui"></el-input>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>⽴即创建</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
data() {
return {
optionList: [
{ value: 1, label: "类型⼀" },
{ value: 2, label: "类型⼆" },
],
ruleForm: {
region: 1, // 默认选中第⼀个
zhang: "",
ming: "",
kemu: "",
bian: "",
yin: "",
dui: "",
},
rules: { // 校验
zhang: [{ required: true, message: "请输⼊zhang", trigger: "blur" }], ming: [{ required: true, message: "请选择ming", trigger: "change" }], kemu: [{ required: true, message: "请选择kemu", trigger: "change" }], bian: [{ required: true, message: "请选择bian", trigger: "change" }], yin: [{ required: true, message: "请选择yin", trigger: "change" }],
dui: [{ required: true, message: "请选择dui", trigger: "change" }],
},
};
},
methods: {
clickOption(val) { // 下拉框选择
if (val == "1") {
this.$refs.ruleForm.resetFields(); // 清空
this.ruleForm.region = 1; // 赋值
} else if (val == "2") {
this.$refs.ruleForm.resetFields();
this.ruleForm.region = 2;
}
},
submitForm(formName) { // ⽴即创建
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},。