elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug

最新推荐文章于 2024-02-28 11:16:33 发布
最新推荐文章于 2024-02-28 11:16:33 发布
阅读量2.4k 收藏 4
点赞数 2
文章标签： vue javascript vue.js
原文链接：https://www.jianshu.com/p/8e7a06e7cad8
版权

elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug

  • 问题描述 : 在elementUI中 , Form表单设置了rules校验规则 , 正常情况下 , 进页面是不会触发校验规则的 , 但是select下拉框设置了multiple 多选属性之后 , 就会产生bug . 原因是select下拉框设置多选属性之后 , 进页面就会触发change事件导致触发校验规则 , 如图

作者：FunnySoul300Jin
链接：https://www.jianshu.com/p/8e7a06e7cad8

解决方案 :
1 . 在 created 钩子函数中 , 默认将绑定的值设置为空数组 this.$set(this.rowData, ‘reason’, []) /* this.rowData为props接收的对象, reason是select下拉框v-model绑定的值 */
在这里插入图片描述
2 . 设置一个data值 , 校验的时候去控制
在这里插入图片描述

小涵涵是程序媛
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决 el-select multiple 下拉多选控件，一进页面就会触发表单校验问题
_修铁路的、的博客
01-05 8921
场景： 新增页面使用el-select multiple 下拉多选控件，并设置了非空校验，打开页面时，下拉多选控件会自动触发表单非空校验，如下图所示： 预期效果是：打开页面，职能属性和其他属性一样，不会自动触发表单非空校验，而是在操作当前属性时触发。 经过查询和测试，目前找到两种方法，但总体都是思路都是一致，设置初始值为空数组即可 解决方法： 第一种： 页面初始化时，设置当前属性(职能属性)初始值为空数组，例如：[] export d...
解决一进页面就会触发trigger: “change“表单校验问题
weixin_58431406的博客
07-28 4285
解决一进页面就会触发trigger: "change"表单校验问题
【element-ui】el-select multiple多选，表单校验问题解决方法
最新发布
小墨鱼的前端问题录
02-28 1730
在项目开发过程中发现，el-select设置了multiple支持多选属性之后，el-select赋值之后，表单校验不通过。、prop属性、rules校验是否正确，这里注意el-select的rules校验的trigger应该是change。注意rule中验证方式应该是“change” @change="vulTypeChange()"如果以上都没问题，那么还有一个原因就是：嵌套太深，导致form检测不到ruleForm的变化。1、添加form表单:rule方式验证，并且给下拉框添加change函数。
Vue进阶（幺捌幺）：elementUI 中 select 多选，数据回显错误的问题解决方法
IT全栈 华强工作室
04-13 6962
前言 在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。 表单代码如需： <el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option @change="changeSelect
element ui中下拉框设置了多选multiple之后 一进页面就触发表单校验
m0_53688297的博客
12-14 851
一进入页面已经触发了判断是否为空的表单验证，在排除页面未调用了validate方法的情况下，再看一下是否将他初始化了值。如果需要的话在点击关闭弹窗时也需要进行初始化操作。
layui多选下拉框样式，整套layui-select-multiple
12-09
html下拉多选框样式，h5下拉多选框整套样式，用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
下拉框多选select多选
03-09
下拉框多选,3个积分意思一下 ,博文地址https://blog.csdn.net/qq_42909145/article/details/104756982
select 下拉框可以多选
03-09
select 下拉框可以多选Demo事列.
详解vuejs2.0 select 动态绑定下拉框支持多选
10-17
在Vue.js 2.0中，动态绑定下拉框（select）是一项常用功能，尤其在构建复杂表单时，能够根据用户的选择更新数据模型。本文将深入探讨如何在Vue 2.0中实现一个支持多选的动态绑定下拉框，并结合具体的代码实例进行...
针对element下拉select可多选时（ multiple）添加校验一进页面就触发校验bug
qq_42859450的博客
08-31 1147
element-plus select触发校验bug
vue elementUI 使用el-select 时 change事件的触发问题
热门推荐
weixin_42524279的博客
06-06 3万+
<el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value">&lt...
el-select 切换multiple报错type check failed for prop “value“. Expected String, Number, got Array
zhenzhenzhen1705的博客
12-08 318
el-select 切换multiple报错type check failed for prop "value". Expected String, Number, got Array。原因是v-model绑定的数据类型切换后有变化，单选为''，多选为 []
el-form 表单校验，el-select多选框进入页面自动校验
L221545的博客
03-04 2394
el-form 表单校验，el-select选择框校验Bug
vue2 antd+form表单+验证async-validator实现多选：仅选择一个分组，且分组内进行多选
我曾崩溃、怯懦、自我怀疑，内心有什么东西腐烂了，恶臭熏天
04-18 1825
1. 使用form表单渲染select ref为参考值，prop为规则验证 data_tpye_dict.baseGrop为预先定位的分组 mode=“multiple” 为多选 <a-form-model-item ref="data_type" label="模型算法" prop="data_type" v-if="activeKey == '地类分割成果服务' || activeKey == '目标检测成果服务'"> <a-select
Vue Element Select选择器自定义验证规则
路虽远行则将至，事虽难做则必成。
12-02 4708
在我们在做增删改查的时候，一般会遇到添加和修改的from表单需要表单验证。一般常规的from表单是有自己的验证规则，from加一个 :rules="rules"但他需要v-model值和prop值要一样，这是常规情况。我遇到的是，绑定多个负责人和对应的电话，加验证规则。实际场景1.我们在from表单绑定多个负责人就需要使用到 select 选择器，下拉的数据是点击打开弹框时发请求来的。2.点击选中的时候，数据时对象形式，id 名字 电话 绑定在一起的。选中负责人的时候，我们是把一整个对象存到数组里面。
解决el-form一进页面就会触发表单校验问题
weixin_41262185的博客
05-12 3792
进来页面就触发校验，解决方案：设置初始值为空数组即可
Vue3+ElementUI el-select 下拉框多选，下拉框里回显多选的数据
06-10
在Vue3+ElementUI中，可以通过v-model指令来实现el-select下拉框的多选，同时可以通过设置el-option的selected属性来实现在下拉框中回显多选的数据。 首先，在数据模型中定义一个数组属性来存储多选的值，例如： ```javascript data() { return { selectedValues: [] } } ``` 然后，在el-select中设置v-model为这个数组属性，并将multiple属性设置为true，例如： ```html <el-select v-model="selectedValues" multiple> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 这样，在多选下拉框中选择的值就会被存储在selectedValues数组中，同时el-option的selected属性会被自动设置为true或false，以反映当前选项是否被选中。 如果需要在下拉框中回显已经选中的数据，可以使用v-for指令循环遍历selectedValues数组，然后在el-select中设置v-slot的方式来自定义选项的内容。例如： ```html <el-select v-model="selectedValues" multiple> <template v-for="value in selectedValues"> <el-option :key="value" :label="value" :value="value" :selected="true"> <span>{{ value }}</span> </el-option> </template> </el-select> ``` 这样，selectedValues数组中已经选中的值就会以自定义的方式显示在下拉框中。需要注意的是，为了避免重复，需要为v-for循环的每个元素设置一个唯一的key属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值