需求:
根据一个下拉框选项内容决定另一个下拉框是否为必填项
(1)根据厂商决定设备名称是否选填或必填。
(2)如果厂商为华为,设备名称为必填**并自定义提示信息**;
(3)如果厂商为其他,设备名称为非必填
建议使用法二
1、data里:
data(){
return{
isShow:false,//判断是否为必填
//这里是法一(不推荐使用)
/*
rules: {
//company: [{ required: isShow, message: '请选单位', trigger: 'blur' },//这里会报错,required无法动态绑定,也无法更改message提示信息(依旧为英文默认提示)
company: [{ trigger: 'blur' },//法一这个不能少
}
*/
}
}
2、template:
<el-form-item label="厂商:" prop="role">
<el-select clearable v-model="ruleForm.role" placeholder="请选择" @change="roleChange">
//由@change判断select是否更改(是select的属性,不知道的看官网)
<el-option
v-for="item in list"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
选填与必填的内容:
法一:(不推荐使用)
<el-form-item label="设备名称" prop="company" :required:"isShow">
法二:
<el-form-item label="设备名称" prop="company" :rules="[{required:isShow,message:'请选择设备名称',trigger:'blur'}]"> //这个是选填与必填的内容,message根据需求更改
3、method方法:
methods: {
roleChange(role){
// 使用$nextTick去更新dom
this.$nextTick(()=>{
//此处判断 是你想要的值 就让它为必填,不是就让走else 逻辑
if(role== '华为'){
this.isShow = true;
}else {
this.isShow = false;
//表单的 ref全部清空验证
this.$refs['ruleForm'].clearValidate();
//清除表单单个验证信息(ruleForm: 为表单Table的ref(获取DOM元素),company:为清除单个项的prop)
//this.$refs['ruleForm'].clearValidate(['company']);
}
});
},
}
做到这里就成功了一大半,但是会发现(还有坑):
在详情(查看)和编辑页面,即使厂商为华为,但设备名称**依旧为非必填**
if (flag == "edit" && data) {
this.rightTitle = "编辑设备";
this.ruleForm = data;
console.log(data);
// if (data.role=='华为') {
// this.isShow=true
// }
data.role=='华为'?this.isShow=true:'', //在当页面为编辑(或详情)时,判断一下选中的是否为华为
this.flag = "edit";
}
4.新增法三(最简单):
<el-form-item label="设备名称" prop="company" :rules="[{required:ruleForm.role=='华为'?true:false;message:'请选择设备名称',trigger:'blur'}]">
....
</el-form-item>