ElementUI @change更改select 表单验证失效的解决办法
起因是这样的,表单有一处,两个Select 选择器是上下级的关系,于是我想到了使用Cascader 级联选择器,来避免先选后选的问题。但是这里的选项 是分成两个数组的 提交时也是两个字段。用v-model肯定是不行了。只好用@change来绑定值。
HTML
<el-form-item label="申请项目" prop="applyProject">
<el-cascader
:value="[
businessForm.applyProjectType,
businessForm.applyProject,
]"
:options="options"
:props="{ label: 'dictLabel', value: 'dictLabel' }"
@change="handleApplyProjectChange"
></el-cascader>
</el-form-item>
验证
rules: {
applyProject: {
required: true,
message: '申请项目不能为空',
trigger: 'change'
}
}
js
handleApplyProjectChange(val) {
this.businessForm.applyProjectType = val[0];
this.businessForm.applyProject = val[1];
},
但是,发现每次修改级联选择器的时候根本不更改表