需求：

根据一个下拉框选项内容决定另一个下拉框是否为必填项

（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-optionv-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去更新domthis.$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>

Vue实现ElementUI中列表的选填与必填（根据一个下拉框选项内容决定另一个下拉框是否为必填项）