ElementUI @change更改select 表单验证失效的解决办法

在使用ElementUI的select组件时遇到表单验证失效的问题,原因是@change事件未触发表单验证。解决方案是通过使用this.$set()方法来强制更新视图,从而重新触发验证。
摘要由CSDN通过智能技术生成

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];
},

但是,发现每次修改级联选择器的时候根本不更改表

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值