<template>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<div class="info-tag">表单信息</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="数据1" prop="test1" >
<el-select v-model="form.test1" placeholder="请选择test1" style="width: 100%" @change="test1Change">
<el-option v-for="dict in dictList" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="数据2" prop="child.test2"
:rules="setRules(form.test1,'child.test2')">
<el-input v-model="form.child.test2" placeholder="请输入test2" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="数据3" prop="child.test3"
:rules="setRules(form.test1,'child.test3')">
<el-input v-model="form.child.test3" placeholder="请输入test3" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
export default {
data(){
return{
// 表单参数
form: {
test1:null,
child: {
test2:null,
test3:null,
}
},
// 表单校验
rules: {
test1: [{required: true, message: "test1不能为空", trigger: "change"}],
'child.test2': [{required: true, message: "test2不能为空", trigger: "blur"}],
'child.test3': [{required: true, message: "test3不能为空", trigger: "blur"}],
}
}
}
methods:{
test1Change(){
// 非必填 清除校验结果
if(e === '3'){
this.$refs.form.clearValidate()
}
},
// 根据数据1选择结果 判断key对应项是否必填
setRules(type,key){
if(type === '1'|| type === '2'){//必填
this.rules[key][0].required = true
return this.rules[key]
}else {// 非必填
this.rules[key][0].required = false
return [{required: false}]
}
},
}
}