ElementUI select设置多选(multiple) 后自动触发formItem校验

最新推荐文章于 2023-08-17 17:17:24 发布

原创最新推荐文章于 2023-08-17 17:17:24 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ElementUI #select #multiple #触发formItem验证

Vue篇专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个在Vue框架中解决表单多选组件（select multiple）触发校验问题的方法。通过在created生命周期钩子中使用Vue的$set方法来重置表单数据，避免了多选选项在初始化时触发不必要的校验。

解决方法：

在Vue生命周期created函数中重置一下触发的参数

  created() {
    // 解决select设置多选(multiple) 触发formItem校验
    this.$set(this.sqlData, 'table', [])
  },

原因：等有空了在分析；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Alecor

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue antd项目实战——select组件mode=“multiple“多选模式下限制选择个数

XSL_HR的博客

03-27

7001

往期知识调用（步骤不懂就看这儿）

layui multiSelect 多选下拉框事件监听

qq_36636312的博客

08-23

3747

1，效果图 2，代码 // 添加 multiple="multiple" <div class="layui-inline"> <select id="tabletype" name="tabletype" multiple="multiple" lay-filter="tabletypechange"> <option value="模型表">模型表</option> <option value

1 条评论您还未登录，请先登录后发表或查看评论

element-ui 的FormItem组件是如何进行绑定值校验的【源码解读】

vet_then_what的博客

11-09

2425

使用element-ui框架有两年了，涉及到el-form组件的校验，只是根据官网给的示例使用。el-form绑定model，绑定prop属性，内的表单绑定v-model。只要v-model绑定的属性与prop属性一致再加上各种校验规则，即可实现某个表单的校验。所以个人就下意识的以为一定要用v-model绑定某个值才能实现校验，在封装自定义组件时，就会下意识的用组件实现v-model绑定值的功能。但是有次在使用同事封装的组件时，他并不是使用的v-model绑定的，而是用:xxx.sync。

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

吴小勇的博客

11-22

3034

封装select组件时，预留了多选的配置，但是配置过后发现，一进入组件后select组件会自动校验，百度了，大概都是说的时选择器输入框在data中的初始值。created钩子函数中，判断当前是否传入multiple参数，如果有传入表示多选，可以将钩子函数中将表单的初始值改为空数组 [ ] ，

element ui中下拉框设置了多选multiple之后一进页面就触发表单校验

m0_58565372的博客

04-11

1788

注： _self.form对象为上述第一种方法中的form对象。2.使用钩子函数，在创建页面时，重置对应属性的值。1.页面初始化时，设置当前属性初始值为空数组。

解决elementUI多选下拉框组件进入页面就自动进行校验的问题

小多的博客

03-24

6396

原因：因为校验字段设置为undefined 解决：将字段初始值设置为[] <el-form-item label="添加菜品" prop="productIds"> <el-select v-model="comboForm.productIds" multiple placeholder="请选择" style="width: 100%" @change="handelChangeProduct" > <el-optio

el-select 多选时的form校验

05-10

el-form-item使用prop属性来绑定验证规则，而el-select作为表单控件，需要正确设置v-model和prop。用户提到多选情况下初始自动校验的问题，比如绑定值为空字符串时，表单会立即显示错误提示。这可能是因为初始值...

el-select 多选 form 表单校验 element-ui

05-11

好的，我现在需要帮助用户解决在使用element-ui的el-select多选组件时的表单校验问题。首先，我得回忆一下用户提供的引用内容，看看有没有相关的线索。根据引用[1]，用户提到了在el-select多选时使用form表单的...

elementUI动态循环表单下拉框选中无效及强制刷新数据后有值校验不通过

白云苍狗

05-12

3636

问题描述动态的循环表单二次编辑： BUG1 如图用户打开条件弹窗(数据来自父组件),渲染表单之后,选择下拉框内容,不回显, 此BUG只有在用户保存过条件后第二次从父组件取值时二次编辑时才会触发. BUG2 通过数据强制渲染后(具体方法见解决方案) 可以修复BUG1 ,但会触发另一个检验不通过问题, 观察data数据确实有值,校验不通过,无法保存解决方案：思路:用户操作之后.data中确实已经变换,但是层级很深,考虑是vue没有监听到,所以没有动态渲染,考虑$set方法 BUG1 很常

el-select多选必输项，怎么去除进页面就触发效验

最新发布

09-19

问题核心在于：当el-select设置为多选（multiple）时，如果v-model绑定的初始值类型不正确（如空字符串''），会导致页面加载时就触发表单校验（非空校验）。正确的做法是将初始值设置为空数组[]。根据引用[1]和...

解决Element-UI el-select多选下拉菜单校验时，默认触发问题

Doggi1023的博客

08-17

2213

在使用el-select多选下拉菜单时，如果当前需求需要校验的话，可能会出现页面加载完毕，多选菜单触发校验问题。

element-ui 多选框初始化时默认校验问题

yangchuangxyz的博客

09-26

816

多选框初始化时总是默认校验显示问题

element ui el-select 多选表单校验问题

2301_76431401的博客

08-09

1279

form表单绑定的form对象对应属性值为空字符串或者null（其他未尝试），表单中的多选下拉框会立刻执行校验并弹出校验信息。将多选下拉框对应的属性值默认值设置未空数组即可。：表单已进入就校验，框变为红色。

element-ui 表单自动校验

凡尘

04-20

290

element 表单自动校验

element from表单个别select 出现一开始就校验了数据，且有数据还通不过校验，选中的项叉不掉问题。

凉城玖的博客

07-01

1023

问题1： element from表单个别select 出现一开始就校验了数据，且有数据还通不过校验。前提条件：校验规则都设置正确，都设置prop rules等情况下出现这个问题。下面是我设置的规则校验：出现原因：在页面数据回显时的数据赋值方式不正确导致的（不一定是这个位置赋值导致的，也有可能是其他地方赋值导致的）。解决办法：给深层次对象赋值时，使用this.$set来赋值。拿这个courses来说原本是 this.list.courseTimes = [...autoCourseT

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

niyooooo的博客

05-19

1500

<el-select v-if="NextPoint.success" v-model="submitForm.messageReceiver" style="width: 50%" filterable multiple > 因为后端需要的下一步执行人为字符串所以最开始写成messageReceiver: "", 结果打开页面就触发了表单验证 ...

解决element ui切换语言时,表单验证自动触发

weixin_44373861的博客

07-01

1582

项目国际化处理。一切换中英文，表单的验证就自动触发，一片红，影响观感。像这样：可以在watch中监听语言变化 watch:{ //处理切换语言时，表单验证全部自动触发 "$i18n.locale": function () { this.$nextTick(() => { this.$refs.form.clearValidate() //form是你自己表单的ref属性值

Layui多选框的使用formSelect

qq_39736671的博客

11-29

2149

Layui多选框的使用formSelect1.页面2.js代码3.实例 1.页面 <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-form-inline"> <fieldset class="layui-ele...

element form 对单个或几个input、select表单校验

alokka的博客

07-04

806

1. 对单个进行校验 this.$refs['form'].validateField('userName', async (valid) => { if (valid) return // code }) 2. 对几个进行校验 this.$refs['form'].validateField(['userName','mobileNumber'], async (valid) => { if (valid) return // code }) ...