vue 两个必填的el-select联动,第一个更改,第二个清空,第二个重新验证不通过--已解决
vue 两个必填的el-select联动,第一个更改,第二个清空。第二个el-select重新验证出现问题。注意第二个select验证的写法,必须要写上type:'array’<el-form-itemlabel="firstSelect":rules="[{required: true,message: 'firstSelect不能为空',trigger: ['blur', 'change
·
vue 两个必填的el-select联动,第一个更改,第二个清空。第二个el-select重新验证出现问题。
注意第二个select验证的写法,必须要写上type:'array’
<el-form-item
label="firstSelect"
:rules="[
{
required: true,
message: 'firstSelect不能为空',
trigger: ['blur', 'change'],
},
]"
prop="firstSelect"
>
<el-select
v-model="form.firstSelect"
@change="selectFirstSelect"
>
<el-option
v-for="(item, index) in firstSelectDict"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label="secondSelect"
:rules="[
{
type:'array',
required: true,
message: 'secondSelect不能为空',
trigger: ['blur','change'] },
]"
prop="secondSelect"
>
<el-select
v-model="form.secondSelect"
@change="selectSecondSelect"
multiple
>
<el-option
v-for="(item, index) in secondSelectDict"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
methods里
清空的方法:先delete,再赋值一个空的
selectFirstSelect(val){
...
//删除第二个select绑定的属性
delete this.form.secondSelect;
//重新添加第二个select绑定的空的属性
this.$set(this.form, "secondSelect", []);
//延迟验证,否则第一个刚改,第二个清空后直接进行验证提示
this.$nextTick(()=>{
this.$refs['form'].clearValidate('secondSelect');
})
},
selectSecondSelect(val){
//强制刷新
this.$forceUpdate();
}
错误尝试:
- 直接赋值为空数组
this.form.secondSelect=[];
- 只用set进行清空
this.$set(this.form, "secondSelect", []);
更多推荐
已为社区贡献1条内容
所有评论(0)