elementUI el-select多选设置必填和非必填反显时表单验证不通过

博客讲述了在Vue项目中使用ElementUI时遇到的一个问题,即el-select多选框在动态设置必填和非必填状态时,表单验证无法正常通过。作者在尝试了多种解决方案,如初始化isHaveTo属性、使用this.nextTick更新数据等后,最终发现是因为同一个el-form-item中,input框和el-select的v-model不同,但prop只设置了input框的v-model导致的。解决方法是将输入框和选择框分开为两个el-form-item,分别绑定不同的prop,从而确保反显时验证正确。

最近碰到了一个需求,让一个字段动态设置必填和非必填

借鉴了https://blog.youkuaiyun.com/weixin_37865166/article/details/92431597这篇文件,默认在初始页面完成后

computed: {
    isHaveTo: function() {
      return this.isOfficeHaveTo
    }
  },

此处需要注意的是isHaveTo的初始化。 而isOfficeHaveTo则是根据数据和字段,动态更改的的属性。
isHaveTo的用法:
在这里插入图片描述
在这里插入图片描述

所有的都已经完成,但是在编辑反显的时候,默认点开页面直接提示该字段不能为空,而我又打印了数据发现没有问题,第一时间想的是没有用set去更新一遍数据,发现之后还是不行,又用了this.set去更新一遍数据,发现之后还是不行,又用了this.setthis.nextTick(() => {})中设置$set,isOfficeHaveTo为true或者false。

其实逻辑没问题,排除了不是表单验证有问题之后发现,这个字段动态判断了input框和el-select多选框是否哪个去显示,两个的v-model名字不同,而且prop只用了input框的v-model

解决办法:
分两个el-form-item,每个prop对应v-model,这样就不会出现反显的时候,验证不通过的问题了。
在这里插入图片描述

### Vue2 中使用 ElementUI功能,清空后无法再次择的原因分析 在 Vue2 ElementUI 组合开发中,当遇到 `el-select` 框被清空后无法重新择的情况,通常是因为以下几个原因之一: #### 原因一:绑定的数据未正确更新 如果绑定到 `v-model` 上的变量没有及响应变化或者存在逻辑错误,可能导致组件的状态未能同步刷新。例如,在清除,如果没有将绑定值重置为空数组(`[]`),而是将其设为 `null` 或者 `undefined`,可能会引发异常行为。 解决办法是在触发清除操作确保绑定值始终是一个有效的数组形式: ```javascript this.selectedValues = []; // 将绑定值初始化为空数组 ``` 此过程需注意保持数据一致性并遵循 Vue 数据驱动视图的原则[^1]。 --- #### 原因二:动态禁用项的影响 某些场景下可能通过编程方式设置了部分项的 `disabled` 属性。一旦这些项被标记为可用状态 (`disabled=true`) 并且用户尝试取消后再点击它们,由于之前的操作遗留下来的状态影响,使得即使手动移除了该属性也无法正常恢复交互能力。 针对这种情况可以通过监听输入框的变化事件(`@change`, `@visible-change`) 来调整对应项目的可用性标志位: ```javascript handleClearOptions() { this.options.forEach(option => option.disabled = false); // 移除所有项上的禁用状态 } ``` 同记得调用上述函数于任何涉及清理动作的地方以保障用户体验流畅度[^2]. --- #### 原因三:表单验证规则干扰 有为了满足特定业务需求会自定义一些校验器附加至控件之上(如必填项), 如果处理当也可能造成类似的副作用现象——即虽然表面上看起来已经完成了删除动作但实际上内部仍保留着旧有痕迹从而阻止新项目加入列表之中. 为了避免此类情况发生应该仔细检查相关联的部分代码片段是否存在潜在隐患比如下面这段展示如何合理配置初始参数的例子: ```html <el-form :model="form" :rules="rules"> <el-form-item label="添加菜品" prop="productIds"> <el-select v-model="form.productIds" multiple> <!-- 动态生成option --> </el-select> </el-form-item> </el-form> <script> export default { data(){ return{ form:{ productIds:[] }, rules:{ productIds:[ {required:true,message:'至少择一项'} ] } }; } }; </script> ``` 另外值得注意的是对于那些依赖外部接口加载内容的择器来说最好提前赋予默认空集合而留白以免引起必要的麻烦[^3]. --- 综上所述, 若要彻底解决问题可以从以上三个方面入手逐一排查直至找到根本所在为止.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值