解决VUE项目使用Element-ui 下拉组件的验证失效问题


Posted in Javascript onNovember 07, 2020

问题描述:

在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的,

这样也没有问题,但是如果加上multiple属性,也就是可以多选 就会出现下拉框验证时失效问题.

问题现象:

解决VUE项目使用Element-ui 下拉组件的验证失效问题

如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求

解决思路:

如果说找遍组件里的方法都无法获得我们适合使用的,那就要动用原生基本功了

console.log一下v-model在此组件上绑定的属性,你发现你绑定的字符串(一般情况下都是String,这里就拿字符串举例说明)打印出来却是Array

所以如果验证必填的话我们就直接判断v-model在此组件上绑定的属性的length是否大于0就好了;其他要求的话可以留言

思路验证:

我有试验过在rules增加type: ‘test',表面上看起来是可以的,但是打开控制台,它已经报错了: Unkown rule type text,如下图:

解决VUE项目使用Element-ui 下拉组件的验证失效问题

竟然没有type=text属性! 好吧~只能继续

既然多选设置之后输出的是数组, 那就跟chexkbox一样 ,我可以把v-model属性改成[],然后rules里面的type: 'array'实验一下,结果不报错,但是验证也不生效

可见Element还是有坑踩哦,我的项目紧急就先原生解决了,哪天找到组件解决办法我会及时更新的,当然如果谁知道解决办法也请分享给我哦~欢迎技术交流

解决代码

if (this.form.STORE_PROVINCE.length === 0 || this.form.STORE_PROVINCE.length == '') {
    this.$message.error('请选择至少一个区域')
    return false
  } else {
   // 要执行的代码
  }

以上便可解决了。

补充知识:element ui表单验证select既获取label又获取value

html部分

<el-form-item label="所属公司" prop="comName">
    <el-select v-model="ruleForm.comName" placeholder="请选择所属公司" @change="selectGet">
   <el-option v-for="item in ruleForm.options2" :key="item.id" :value="item.id" :label="item.comName"></el-option>
    </el-select>
</el-form-item>

js部分

//获取selectlabel值
selectGet(vId){
  let obj = {};
  obj = this.ruleForm.options2.find((item)=>{//this.ruleForm
  return item.id === vId;//筛选出匹配数据
  });
  console.log(obj.comName);//我这边的name就是对应label的
},

在data return里边定义

data(){
  return{
    ruleForm:{
      options:[
        {id:1,comName:'BEIJING'},
        {id:2,comName:'TIANJIN'}
      ]
    }
  
  }
}

以上这篇解决VUE项目使用Element-ui 下拉组件的验证失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue实现弹幕功能
Oct 25 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
详解datagrid使用方法(重要)
Nov 06 #Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 #Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 #Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 #Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
javascript 常用功能总结
2012/03/18 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
搭建vue开发环境
2018/07/19 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Django中处理出错页面的方法
2015/07/15 Python
Python实现随机选择元素功能
2017/09/14 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
广告学专业应届生求职信
2013/10/01 职场文书
房地产销售计划书
2014/01/10 职场文书
2014庆六一活动方案
2014/03/02 职场文书
论文诚信承诺书
2014/05/23 职场文书
新农村建设汇报材料
2014/08/15 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL