解决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 相关文章推荐
裁剪字符串trim()自定义改进版
Apr 10 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
JS继承用法实例分析
Feb 05 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
基于Vue中的父子传值问题解决
2020/07/27 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python3 中文文件读写方法
2018/01/23 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python生成随机红包的实例写法
2019/09/02 Python
Python实现一个论文下载器的过程
2021/01/18 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
称象教学反思
2014/02/03 职场文书
关于责任的演讲稿
2014/05/20 职场文书
服务标语口号
2014/07/01 职场文书
争先创优公开承诺书
2014/08/30 职场文书
房屋出租委托书格式
2014/09/23 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
公司表扬稿范文
2015/05/05 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL