[JavaScript知识库]Vue实现ElementUI中列表的选填与必填（动态绑定，自定义提示信息）

需求：

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

（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";
  }