前提 肯定是有一个下拉 联动表单的另外一个元素，这才需要 动态的根据第一个下拉框的值进行判断，从而动态更改dom树

需求： 根据角色动态的 修改表单元素是否为非必填

1. 定义一个data 变量 ：

isShow:true

2. 定义规则 验证的rules

data :function(){
	return {
		rules: {
			  company: [{ required: isShow, message: '请选单位', trigger: 'blur' },
		}
	}
}

或者直接在html上 添加如下代码。

<el-form-item label="单位：" prop="company" 
:rules="[{required:isShow,message:'请选择单位',trigger:'blur'}]">

3. 定义methods

此处需要定义的就是根据 下拉框的值 动态的更改dom 树的 change 方法
代码片段如下:

<el-form-item label="角色：" prop="role">
      <el-select clearable v-model="ruleForm.role" placeholder="请选择" @change="roleChange">
              <el-option
                       v-for="item in list"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
               </el-option>
      </el-select>
</el-form-item>

   methods: {
        roleChange(role){
        // 使用$nextTick去更新dom
            this.$nextTick(()=>{
            //此处判断 是你想要的值 就让它为必填，不是就让走else 逻辑
                if(role== '1'){
                    this.isShow = true;
                }else {
                    this.isShow = false;
                    //表单的 ref  清空验证
                    this.$refs['ruleForm'].clearValidate();
                }
            });
        },
   }

至此，改需求就实现了。