解决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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
读懂CommonJS的模块加载
Apr 19 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
vue选项卡切换登录方式小案例
Sep 27 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伪静态写法附代码
2008/06/20 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
常用PHP框架功能对照表
2014/10/23 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
JS调试必备的5个debug技巧
2014/03/07 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
Python3学习urllib的使用方法示例
2017/11/29 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python操作json的方法实例分析
2018/12/06 Python
python实现自动解数独小程序
2019/01/21 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
小学红领巾中秋节广播稿
2014/01/13 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
党员自我对照检查材料
2014/08/19 职场文书
给朋友的赠语
2015/06/23 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
世界十大狙击步枪排行榜
2022/03/20 杂记
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL