解决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与C# Windows应用程序交互方法
Jun 29 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
解决Antd Table组件表头不对齐的问题
Oct 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
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
JS中表单的使用小结
2014/01/11 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
小程序实现投票进度条
2019/11/20 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
js实现碰撞检测
2021/01/29 Javascript
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python 将md5转为16字节的方法
2018/05/29 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python实现最常见加密方式详解
2019/07/13 Python
基于python实现模拟数据结构模型
2020/06/12 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
详解python tcp编程
2020/08/24 Python
python中random模块详解
2021/03/01 Python
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
标准自荐信范文
2014/01/29 职场文书
遗嘱继承公证书
2014/04/09 职场文书
鼓舞士气的口号
2014/06/16 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
个人委托书如何写
2014/09/25 职场文书
领导欢迎词致辞
2015/01/23 职场文书