针对element下拉select可多选时（ multiple）添加校验一进页面就触发校验bug

最新推荐文章于 2024-05-22 17:31:43 发布
最新推荐文章于 2024-05-22 17:31:43 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： vue vite 文章标签： bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42859450/article/details/126617004
版权
本文介绍了Element UI中多选下拉框（Select）在使用multiple属性时遇到的一进页面就触发校验的bug。通过提供一个初始值为空数组的解决方案，解决了该问题。
摘要由CSDN通过智能技术生成

bug如下图
在这里插入图片描述
解决方案给此下拉框（图中是组员）的v-model字段设置一个初始值为空数组如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/e17cecfef81d496a84ff3a4d9e42a226.png

formData: {staff:[]} as SubgroupItem,
<el-form-item prop="staff" label="组员"
最低0.47元/天 解锁文章
mxlWhb
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element ui 下拉多选时新增一个选择所有的选项
10-16
主要介绍了Element ui 下拉多选时 新增一个选择所有的选项,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
el-form 表单校验，el-select多选框进入页面自动校验
L221545的博客
03-04 2456
el-form 表单校验，el-select选择框校验Bug
解决 el-select multiple 下拉多选控件，一进页面就会触发表单校验问题
_修铁路的、的博客
01-05 9069
场景： 新增页面使用el-select multiple 下拉多选控件，并设置了非空校验，打开页面时，下拉多选控件会自动触发表单非空校验，如下图所示： 预期效果是：打开页面，职能属性和其他属性一样，不会自动触发表单非空校验，而是在操作当前属性时触发。 经过查询和测试，目前找到两种方法，但总体都是思路都是一致，设置初始值为空数组即可 解决方法： 第一种： 页面初始化时，设置当前属性(职能属性)初始值为空数组，例如：[] export d...
【vue3+elementuiplus】el-select下拉框会自动触发校验规则
最新发布
qq_33225414的博客
05-22 792
在关闭弹层事件中，我做了resetfileds，resetfileds置空form表单，其实本质上也是一种改变select的操作，故而触发了select的change事件，在第二次打开新增弹层时，select的值为“ ”，所以才会触发表单校验规则。因此，我在el-dialog上面加了销毁属性，当dialog关闭后，整个组件就被销毁，打开新增弹层时已经是一个新dom，就不会出现bug了。
解决bug--select下拉框由单选设置了多选multiple之后 一进页面就触发校验
zx990912的博客
01-11 706
控件已经有选中的值，因此不会触发非空校验。只有在用户进行选择后，绑定的数组才会更新，触发表单的校验逻辑。通过设置初始值为空数组解决自动触发表单非空校验的问题。这是因为在表单初始时，select下拉框由单选设置了多选multiple之后 一进页面就触发校验。控件没有选中任何值，而表单的非空校验是基于其绑定的值来进行的。
表单校验问题——el-select（初始化页面自动触发校验解决办法）
XIAO_A_fighting的博客
06-28 6215
情景：为表单添加校验功能：填好信息后，点击提交按钮，触发校验。bug：当触发过校验函数后，再次进入表单页面，会自动触发添加了multiple属性的el-select组件的表单校验。el-select绑定的数据为null，就会触发change事件，从而开启了表单校验将v-model的初始值修改为空数组即可。...
elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug
吴小勇的博客
11-22 2829
封装select组件时，预留了多选的配置，但是配置过后发现，一进入组件后select组件会自动校验，百度了，大概都是说的时选择器输入框在data中的初始值。created钩子函数中，判断当前是否传入multiple参数，如果有传入表示多选，可以将钩子函数中将表单的初始值改为空数组 [ ] ，
el-select multiple表单校验问题
askuld的博客
12-20 1351
prop属性、rules校验是否正确，这里注意el-select的rules校验的trigger应该是change。如果以上都没问题，那么还有一个原因就是：嵌套太深，导致form检测不到ruleForm的变化。2、选中下拉数据，不会再次触发校验，导致提示文字一直存在。至此，完美解决el-select复选框表单校验。记录一个el-select复选框表单校验例子。注意rule中验证方式应该是“change”1）添加form表单:rule方式验证。2）给下拉框添加change函数。1、一打开页面就会触发校验。
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
在Vue Element UI中，`Select`组件是一个常用的下拉选择器，它提供了丰富的功能，如分组、多选和搜索。在本示例中，我们将深入探讨如何将这些特性结合起来，实现一个完整的分组+多选+可搜索的`Select`选择器。 首先...
element ui select多选组件 重构
05-03
在重构 `element ui select` 多选组件时，我们需要考虑以下几个方面： 1. **动态标签显示**：描述中提到的“标签根据数据属性显示颜色不同”，这可能是指通过数据绑定实现标签颜色的动态变化。我们可以利用 Vue 的...
解决elementUI多选下拉框组件进入页面就自动进行校验的问题
小多的博客
03-24 5756
原因：因为校验字段设置为undefined 解决：将字段初始值设置为[] <el-form-item label="添加菜品" prop="productIds"> <el-select v-model="comboForm.productIds" multiple placeholder="请选择" style="width: 100%" @change="handelChangeProduct" > <el-optio
elementui选择器多选时闪_elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug...
weixin_36283702的博客
01-17 1308
问题描述 : 在elementUI中 , Form表单设置了rules校验规则 , 正常情况下 , 进页面是不会触发校验规则的 , 但是select下拉框设置了multiple 多选属性之后 , 就会产生bug . 原因是select下拉框设置多选属性之后 , 进页面就会触发change事件导致触发校验规则 , 如图bug现象解决方案 :1 . 在 created 钩子函数中 , 默认将绑定的值设...
vue2+element ui el-select下拉框清空 会自动触发校验规则的解决方案
Zwxlovewq的博客
08-06 2216
vue2+element ui el-select下拉框清空 会自动触发校验规则的解决方案
【element-ui】el-select multiple多选，表单校验问题解决方法
小墨鱼的前端问题录
02-28 2172
在项目开发过程中发现，el-select设置了multiple支持多选属性之后，el-select赋值之后，表单校验不通过。、prop属性、rules校验是否正确，这里注意el-select的rules校验的trigger应该是change。注意rule中验证方式应该是“change” @change="vulTypeChange()"如果以上都没问题，那么还有一个原因就是：嵌套太深，导致form检测不到ruleForm的变化。1、添加form表单:rule方式验证，并且给下拉框添加change函数。
el-select初始化页面自动触发校验
yy_demo的博客
08-23 573
后来搜到因为初始化的时候绑定的数据不能为null，我就在data中表单绑定的数据里加上了select的数据为空数组，但是我还是想不明白，我的两个下拉框都是在空对象里面，为什么一个被触发一个没有，突然发现被触发的漏写了placeholder，加上之后初始化的时候就不会触发校验了。el-cascader我没有找到满足我要求的，我就想用两个下拉框去实现，先选择组然后通过组el-select绑定的change事件去获取用户的下拉列表数据，我发现初始化的时候用户的下拉框被触发了校验。
vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题
stay hungry, stay foolish
08-31 2187
新增和编辑共用一个弹窗时，每次打开新增弹窗，el-select的表单项会触发change事件的自动校验。我这里的下拉选择是支持多选的，也就是属性上有multiple。
vue3编写element ui下拉列表可多选
10-13
在 Element UI 中，可以使用 ElSelect 组件实现下拉列表，而多选功能可以通过设置 multiple 属性来实现。在 Vue 3 中，可以使用 Composition API 来编写组件，具体实现如下： ```vue <el-select v-model=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值