解决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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
js同源策略详解
May 21 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
vue实现div单选多选功能
Jul 16 Javascript
vue监听dom大小改变案例
Jul 29 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中改变图片的尺寸大小的代码
2011/07/17 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python字典的核心底层原理讲解
2019/01/24 Python
用python实现刷点击率的示例代码
2019/02/21 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python开启debug模式的方法
2019/06/27 Python
对python中list的五种查找方法说明
2020/07/13 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
基本款天堂:Everlane
2017/05/13 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
工程安全生产协议书
2014/11/21 职场文书
本溪关门山导游词
2015/02/09 职场文书
护理工作个人总结
2015/03/03 职场文书
2015年推普周活动总结
2015/03/27 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang