el-select multiple 选择器多选控件，初始就会触发表单校验的问题

最新推荐文章于 2023-10-24 14:58:01 发布
最新推荐文章于 2023-10-24 14:58:01 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： vue3相关 文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niyooooo/article/details/124864367
版权
本文讲述了在前端开发中遇到的一个关于表单验证的问题。当使用Vue.js的el-select组件时，由于后端需要的下一步执行人为字符串类型，最初将messageReceiver字段初始化为字符串，导致页面加载时触发了不必要的表单验证。解决方案是将初始值改为空数组，从而避免了页面加载时的验证错误。这个案例强调了正确设置初始值对于前端表单管理的重要性。
摘要由CSDN通过智能技术生成 
        <el-select
          v-if="NextPoint.success"
          v-model="submitForm.messageReceiver"
          style="width: 50%"
          filterable
          multiple
        >

因为后端需要的下一步执行人为字符串

所以最开始写成  messageReceiver: "",

结果打开页面就触发了表单验证

解决方法为：初始值设置为空数组

 

el-select 下拉框多选实现全选的实现
10-16
在Web前端开发中，el-select是Element UI库中提供的一个常用的下拉选择组件。它可以方便地实现单选或多选功能，但在某些场景下，用户需要实现全选功能，即在多选下拉框中可以选择或取消选择所有选项。文章《el-...
解决Element-UI el-select多选下拉菜单校验时，默认触发问题
Doggi1023的博客
08-17 2001
在使用el-select多选下拉菜单时，如果当前需求需要校验的话，可能会出现页面加载完毕，多选菜单触发校验问题。
记录bug，element-ui form表单，select多选时，初始自动校验问题解决
LKnology的博客
09-04 704
el-select v-model="formData.jcGhyt" multiple placeholder="请选择"><el-form-item label="规划业态" label-width="110px" prop="jcGhyt">校验时， 如果绑定值为空字符串，表单中的多选下拉框会自动执行校验并提示红色文字提示。原因：form表单-value1默认为空字符串把jcGhyt设置为空数组即可。使用 el-select 多选框配置。
el-form 表单校验，el-select多选框进入页面自动校验
L221545的博客
03-04 2538
el-form 表单校验，el-select选择框校验Bug
element ui中下拉框设置了多选multiple之后 一进页面就触发表单校验
m0_58565372的博客
04-11 1519
注： _self.form对象为上述第一种方法中的form对象。2.使用钩子函数，在创建页面时，重置对应属性的值。1.页面初始化时，设置当前属性初始值为空数组。
elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug
吴小勇的博客
11-22 2893
封装select组件时，预留了多选的配置，但是配置过后发现，一进入组件后select组件会自动校验，百度了，大概都是说的时选择器输入框在data中的初始值。created钩子函数中，判断当前是否传入multiple参数，如果有传入表示多选，可以将钩子函数中将表单的初始值改为空数组 [ ] ，
详解element-ui中el-select的默认选择项问题
10-16
此外，`el-select`还有一些其他特性，如多选模式（通过设置`multiple`属性）、远程搜索（通过`remote`和`filterable`属性）等，它们也可以影响默认选择项的处理。例如，在多选模式下，`v-model`应绑定到一个数组，...
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
如下所示： <el v-model=level size=mini ...我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用 @change=”selectChange()
【vue3+elementuiplus】el-select下拉框会自动触发校验规则的最强解决方案
热门推荐
bbt953的博客
08-02 1万+
el-select下拉框会自动触发校验规则的最强解决方案
关于el-select自动校验的问题
qq_41988415的博客
07-27 2668
首次加载页面或刷新页面会触发select选择框校验
解决 el-select multiple 下拉多选控件，一进页面就会触发表单校验问题
_修铁路的、的博客
01-05 9356
场景： 新增页面使用el-select multiple 下拉多选控件，并设置了非空校验，打开页面时，下拉多选控件会自动触发表单非空校验，如下图所示： 预期效果是：打开页面，职能属性和其他属性一样，不会自动触发表单非空校验，而是在操作当前属性时触发。 经过查询和测试，目前找到两种方法，但总体都是思路都是一致，设置初始值为空数组即可 解决方法： 第一种： 页面初始化时，设置当前属性(职能属性)初始值为空数组，例如：[] export d...
针对element下拉select可多选时（ multiple）添加校验一进页面就触发校验bug
qq_42859450的博客
08-31 1326
element-plus select触发校验bug
element ui el-select 多选表单校验问题
2301_76431401的博客
08-09 1060
form表单绑定的form对象对应属性值为空字符串或者null（其他未尝试），表单中的多选下拉框会立刻执行校验并弹出校验信息。将多选下拉框对应的属性值默认值设置未空数组即可。：表单已进入就校验，框变为红色。
表单校验问题——el-select（初始化页面自动触发校验解决办法）
XIAO_A_fighting的博客
06-28 6525
情景：为表单添加校验功能：填好信息后，点击提交按钮，触发校验。bug：当触发过校验函数后，再次进入表单页面，会自动触发添加了multiple属性的el-select组件的表单校验。el-select绑定的数据为null，就会触发change事件，从而开启了表单校验将v-model的初始值修改为空数组即可。...
表单校验时，使用el-select multiple 下拉多选控件，一进页面就会触发表单校验问题解决
Soul_1998的博客
12-17 1059
在我设置必填后，一进页面就提示了 后来发现 改字段绑定的属性 需为一个空数组即可解决 原文链接：原文
element-ui form表单，select多选时，初始自动校验问题解决
vue-cli脚手架初始化代码
11-10 2630
element select 下拉框校验问题
el-select multiple表单校验问题
最新发布
qq_41838435的博客
10-24 782
1、触发校验后， 一打开页面就会触发表单校验 **2、选中下拉数据，不会再次触发校验，导致提示文字一直存在**
vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题
stay hungry, stay foolish
08-31 2330
新增和编辑共用一个弹窗时，每次打开新增弹窗，el-select的表单项会触发change事件的自动校验。我这里的下拉选择是支持多选的，也就是属性上有multiple。
Vue+ElementUI使用el-select multiple 单选或多选后点击编辑后回显
06-10
如果你使用了el-select的multiple属性进行单选或多选，然后想要实现点击编辑后回显的功能，可以通过以下步骤实现： 1. 给el-select绑定一个v-model，用来存储选择的值。 2. 在点击编辑按钮后，将v-model中的值赋给一个临时变量，用来记录编辑前的选择结果。 3. 将el-select的multiple属性设置为false，变为单选状态。 4. 将临时变量的值赋给el-select的v-model，将选择结果回显到el-select中。 5. 编辑完成后，将el-select的v-model的值赋给临时变量，并将multiple属性设置回原来的状态。 下面是一个简单的示例代码： ```html <template> <div> <el-select v-model="selected" multiple> <el-option label="Option 1" value="1"></el-option> <el-option label="Option 2" value="2"></el-option> <el-option label="Option 3" value="3"></el-option> </el-select> <el-button @click="edit">编辑</el-button> </div> </template> <script> export default { data() { return { selected: [], // 存储选择结果的数组 tempSelected: [] // 临时存储编辑前的选择结果的数组 } }, methods: { edit() { // 记录编辑前的选择结果 this.tempSelected = [...this.selected] // 将multiple属性设置为单选 this.$refs.select.multiple = false // 将选择结果回显到el-select中 this.selected = this.tempSelected[0] }, done() { // 将编辑后的结果赋给临时变量 this.tempSelected[0] = this.selected // 将multiple属性设置回原来的状态 this.$refs.select.multiple = true } } } </script> ``` 在上面的代码中，我们在el-select上加了一个ref属性，用来在代码中获取el-select的DOM元素，然后在edit方法中，将el-select的multiple属性设置为false，变为单选状态，并将临时变量的值赋给el-select的v-model，实现了回显选择结果的功能。在done方法中，将编辑后的结果赋给临时变量，并将multiple属性设置回原来的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值