DEMO：js.jirengu.com/rehuvolemu/… （在线编译工具直接查看效果）
期望：表单项2选1，必填。切换时将禁用的表单项的 验证规则去掉（思路：将prop赋值为 ' ' ）
尝试解决：通过计算属性绑定prop，根据单选框选中的值切换 prop值 为 规则字段（增加）或者 空字符串（去除）。
问题：watch监听了数据的变化，正常无误，计算属性为正确值。
第一个表单项的规则可以动态 去除 并且再次 添加 。
第二个表单项的规则加不上（奇怪的是必填的小星星出来了的，只是验证没有加上）。
打印了 this.$refs['form'] 可以看到 第二个表单项的 prop 是没有传进去的。
发现问题：尝试了找计算属性的set get问题，并不是。多方测试之后发现是prop的传入初始值必须是非空字符串（就算是rules里面没有定义的都行）。（问题就是这个，但是为什么我去看了源码也没看懂，希望有缘遇到大佬给解答一下）
重点: 第二个表单项的初始prop值必须不能为空 随便什么字符串都可以
computed: {
itemIdchange: function () {
return this.qiehuan == '1' ? 'itemId' : '';
},
itemIdchange1: function () {
return this.qiehuan == '2' ? 'otherId' : 's';
},
},
// this.qiehuan 是单选框的值
//初始第一个表单项的prop值是 'itemId' 初始 非 '' 后续可以切换 ''
//初始第二个表单项的prop值如果是 '' 初始就为 '' 后续切换 'otherId' 加不上
//第二个表单项的初始prop值必须不能为空 随便什么字符串都可以
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="vue项目演示" />
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="http://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
</head>
<body>
<div id="app">
<div @click="submit1" style='width:100px;cursor:pointer;border:1px solid;'>点我出现验证提示--然后切换单选框继续点
我测试是否出现验证提示</div>
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
<el-row>
<el-col :span="10">
<el-form-item label="问题类别：" :prop="itemIdchange">
<el-radio v-model="qiehuan" label="1" @change="ss"> </el-radio>
<el-select v-model="form.itemId" placeholder="请选择" :disabled="qiehuanJJ">
<el-option label="项目基础类" value="00000000-0000-0000-0000-000000000001"></el-option>
<el-option label="技术架构类" value="00000000-0000-0000-0000-000000000002"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="项目：" :prop="itemIdchange1">
<el-radio v-model="qiehuan" label="2" @change="ss"> </el-radio>
<el-select v-model="form.otherId" filterable placeholder="请选择项目" :disabled="!qiehuanJJ">
<el-option label="测试1" value="1"></el-option>
<el-option label="测试2" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<script>
var Main = {
data() {
return {
rules: {
itemId: [
{ required: true, message: '请选择问题类别', trigger: 'change' },
],
otherId: [
{ required: true, message: '请选择项目', trigger: 'blur' },
],
},
qiehuanJJ:false,
form: {
itemId:'',
otherId:'',
},
qiehuan:'1',
};
},
computed: {
itemIdchange: function () {
return this.qiehuan == '1' ? 'itemId' : '';
},
itemIdchange1: function () {
return this.qiehuan == '2' ? 'otherId' : '';
}
},
watch: {
itemIdchange: function(a,b){
console.log(a,b,'左边prop 新值 -- 旧值')
},
itemIdchange1: function(a,b){
console.log(a,b,'右边prop 新值 -- 旧值')
},
qiehuan: function(a,b){
console.log(a,b,'单选框值 新值 -- 旧值')
}
},
methods: {
ss(){
this.$refs['form'].clearValidate();
if (this.qiehuan == '1') {
this.qiehuanJJ = false;
}else {
this.qiehuanJJ = true;
}
},
submit1(){
this.$refs['form'].validate((valid)=>{
if(valid){
console.log('success')
}else {
console.log('faild')
}
})
},
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>
效果
