vue el-select multiple 下拉多选控件，一打开页面就会触发表单校验问题

最新推荐文章于 2024-05-22 17:31:43 发布
最新推荐文章于 2024-05-22 17:31:43 发布
阅读量2.3k 收藏 2
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37816134/article/details/122358926
版权

问题描述：form表单中使用 el-select multiple 下拉多选控件，并设置了非空校验，打开页面时，下拉多选控件会自动触发表单非空校验，如下图：

预期效果是：打开页面，机构和其他属性一样，不会自动触发表单非空校验，而是在操作当前属性时触发。

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

成长中...
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
如下所示： <el v-model=level size=mini ...我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用 @change=”selectChange()
elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug
m0_52263688的博客
04-06 2467
elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug 问题描述 : 在elementUI中 , Form表单设置了rules校验规则 , 正常情况下 , 进页面是不会触发校验规则的 , 但是select下拉框设置了multiple 多选属性之后 , 就会产生bug . 原因是select下拉框设置多选属性之后 , 进页面就会触发change事件导致触发校验规则 , 如图 作者：FunnySoul300Jin 链接：https://www.jianshu.com
【vue3+elementuiplus】el-select下拉框会自动触发校验规则
最新发布
qq_33225414的博客
05-22 707
在关闭弹层事件中，我做了resetfileds，resetfileds置空form表单，其实本质上也是一种改变select的操作，故而触发了select的change事件，在第二次打开新增弹层时，select的值为“ ”，所以才会触发表单校验规则。因此，我在el-dialog上面加了销毁属性，当dialog关闭后，整个组件就被销毁，打开新增弹层时已经是一个新dom，就不会出现bug了。
el-select multiple表单校验问题
qq_41838435的博客
10-24 667
1、触发校验后， 一打开页面就会触发表单校验 **2、选中下拉数据，不会再次触发校验，导致提示文字一直存在**
解决el-form一进页面就会触发表单校验问题
weixin_41262185的博客
05-12 3873
进来页面就触发校验，解决方案：设置初始值为空数组即可
解决Element-UI el-select多选下拉菜单校验时，默认触发问题
aijf2525的博客
12-29 874
因为select启用了multiple多选，那么相应的字段应该是数组，而不是string或其他类型 把多选下拉菜单对应的v-modle属性默认值赋值为[ ]，多选校验规则就会变得理想，方法纯属个人见解，有更好的方法希望大家提出！如果data中form表单绑定的接收对象对应的属性值为" "时（单选默认为空字符串），多选菜单会立即触发表单校验。在使用el-select多选下拉菜单时，如果当前需求需要校验的话，可能会出现页面加载完毕，多选菜单触发校验问题。
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-select 多选下拉列表
09-11
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
解决bug--select下拉框由单选设置了多选multiple之后 一进页面就触发校验
zx990912的博客
01-11 671
控件已经有选中的值，因此不会触发非空校验。只有在用户进行选择后，绑定的数组才会更新，触发表单的校验逻辑。通过设置初始值为空数组解决自动触发表单非空校验的问题。这是因为在表单初始时，select下拉框由单选设置了多选multiple之后 一进页面就触发校验。控件没有选中任何值，而表单的非空校验是基于其绑定的值来进行的。
vue单页面 el-form一打开就校验
future_1_的博客
12-07 1231
vue单页面 el-from一打开就校验
vue element-ui select 多选验证不通过问题处理
u012386455的博客
04-21 5162
vue elemnt ui select 多选验证不通过
vue element select username password 表单验证
weixin_44286765的博客
03-31 279
<template> <div> <el-col :span="24" class="toolbar" style=" padding-bottom: 0px; padding-bottom: 0px; display: flex; justify-content: space-between; " > <el-form :
el-select进行表单验证不执行
jasmine0178的博客
01-02 6315
遇到的问题，在供应商这里进行form表单验证的时候，验证不执行 例如：选择之后提示不消失 将rules这里的验证改为 supplier: [ { required: true, message: “请选择供应商”, trigger: [“blur”,‘change’] } ], 就可以了 supplier: [ { required: true, message:...
el-select 的multiple属性从false切换为true时页面值不清空
weixin_45714898的博客
05-17 1891
el-select 的multiple属性从false切换为true时页面值不清空 el-select的multiple初始值设置为false单选 选中性别 点击按钮切换multiple为true，选择框的值selectValue设置为[]，但是页面上选择框的值并没有清空 解决办法，先把selectValue置为undefined, 再在nextTick里面切换multiple为true，把selectValue设置为[] 代码： <!-- 选择框 -->
el-select的multiple属性从false切换为true时页面值不清空
weixin_43965251的博客
06-17 389
el-select页面值清空失败
element ui中下拉框设置了多选multiple之后 一进页面就触发表单校验
m0_53688297的博客
12-14 866
一进入页面已经触发了判断是否为空的表单验证，在排除页面未调用了validate方法的情况下，再看一下是否将他初始化了值。如果需要的话在点击关闭弹窗时也需要进行初始化操作。
vue 实现el-select下拉多选及分页的功能
05-26
实现el-select下拉多选及分页功能，可以使用 el-select 的 remote 方法结合 el-pagination 组件实现。 首先，需要在 el-select 中添加 multiple 和 remote 属性来开启多选和远程搜索功能： ```html <el-select v-model="selectedItems" multiple remote filterable :remote-method="remoteMethod" :loading="loading" :options="items" :disabled="disabled" :clearable="clearable" @visible-change="handleVisibleChange" > <template #default="{ option }"> <span>{{ option.label }}</span> </template> </el-select> ``` 然后，在 data 中定义需要用到的变量： ```js data() { return { selectedItems: [], items: [], currentPage: 1, pageSize: 10, total: 0, loading: false, disabled: false, clearable: true }; } ``` 接着，定义远程搜索的方法 remoteMethod 和分页的方法 handlePageChange： ```js methods: { async remoteMethod(query) { this.loading = true; const res = await fetch(`https://example.com/api/items?q=${query}`); const data = await res.json(); this.loading = false; this.items = data.items; this.total = data.total; }, handlePageChange(page) { this.currentPage = page; this.remoteMethod(this.$refs.select.inputValue); } } ``` 最后，在 el-pagination 组件中使用 handlePageChange 方法来实现分页： ```html <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange" /> ``` 这样，就可以在 el-select 中实现下拉多选及分页的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值