问题:一级环境,二级环境必填,三级环境名称根据二级环境是否选择其它做选择性判断是否必填
前端代码
<el-form-item label="用户环境:" required>
<div>
<div class="el-form-scenne">
<el-form-item prop="first">
<el-select
v-model="form.first"
style="width:200px;"
@change="changeFirst"
placeholder="请选择一级环境"
filterable
>
<el-option
v-for="item in firstList"
:key="item.id"
:value="parseInt(item.id)"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
</div>
<div class="el-form-scenne">
<el-form-item prop="second">
<el-select
v-model="form.second"
style="width:200px;"
@change="changeSecond"
placeholder="请选择二级环境"
filterable
:disabled="!form.first"
>
<el-option
v-for="item in secondList"
:key="item.id"
:value="item.id"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
</div>
<div class="el-form-scenne">
<el-form-item prop="third">
<el-input
v-model="form.third"
style="width:200px;"
placeholder="请输入三级环境名称"
></el-input>
</el-form-item>
</div>
</div>
</el-form-item>
注意点:
1,el-form标签需要加required
2,el-form-item 里面套el-form-item,做嵌套,嵌套el-form-item需要加上prop属性值
校验规则:
first: [{ required: true, message: '请选择一级环境', trigger: 'change' }],
second: [{ required: true, message: '请选择二级环境', trigger: 'change' }],
third: [{ validator: validatorThird, trigger: 'blur' }],
validatorThird方法:
let validatorThird = (rule, value, callback) => {
if (!!this.form.second) {
let val =
this.secondList && this.secondList.length > 0
? this.secondList.find(item => item.id === this.form.second)
: '';
if ((val.name === '其它' || val.name === '其他') && !value) {
callback(new Error('请输入三级环境名称'));
} else {
callback();
}
} else callback();
};