【必选项提示小方法】vue处理多个条件选择时，判断必选项没有选择的弹出对应的提示【通俗易懂，详细注释】
前言：
前端小伙伴们很多时候会遇到一个情况，就是页面中查询的时候有多个条件，可能是输入框可能是下拉框或者时间选择器，其中肯定会有一些选项是必选项，那么这时候就会出现一个情况，你需要根据必选项有没有被选中提示用户哪个必选项没有被选中，因为如果不提示，那用户点了搜索后啥反应没有会显得很呆。
一般我们可能会想到用表单验证的方式可以处理这种的，但是我感觉还是麻烦了点。所以写了个简单的方法分享出来
效果图
像这样：必选项哪个没选中就会提示出来。
上代码
getdata() {//必选项的几个变量直接用数组装起来let effectList = [//输入框变量this.factory,//下拉框多选的数组this.shiftvalue,//elementul时间日期的选择器，注意要加toString，不然报错this.value1.toString(),];//提前设定你的必选项提示信息let _effectList = ["工厂", "时间类型", "开始结束日期"];//用来存所有未选中的必选项提示信息let info = [];//循环必选项数组effectList.forEach((item, index) => {//判断必选项每一个的长度是否为0，等于0就代表没输入没选择。只要选择或者输入了就肯定有长度if (item.length == 0) {//循环的时候发现没有选择必选项的就用当前的角标去拿提前准备好的提示信息数组内的对应名称存到info数组内。info.push(_effectList[index]);}});//再判断info数组长度是否不等于0，不等于0就代表有值，有值就是因为上面没有选择必选项才会添加进去，才会有值if (info.length !== 0) {//elementul的提示组件，用es6的模板字符串把info展示出去，后面的字自己可以修改一下。this.$message({message: `（${info}）为必填项，请填写后从新查询！`,type: "warning",});//这里return很重要啊，不写就会继续执行下面的代码了，我们这里需要如果没有选中必须项就代码暂停不继续执行了。直到符合条件才继续执行下面的请求。return;}//这里开始下面都是请求和其他代码了，不用管，看上面就行，上面就是限制必选项的部分，把他放在你的查询方法的最上面，然后用户查询的时候就会先验证一遍，如果通过才执行这下面的代码。this.loading_show = true;this.$http({url: this.$http.adornUrl("/MesBalanceView/passRateAndStanded"),method: "get",params: this.$http.adornParams({//页数pageSize: this.pageSize,//当前页码currPage: 1,factory: this.factory,//硫化规格builddesc: this.formingMachine,//开始结束日期startTime: this.value1[0],endTime: this.value1[1],//成型时间timeType: this.shiftvalue,}),}).then(({ data }) => {if (data.code == 0) {console.log(data, "规格合格率后台返回数据");this.tableData = data.page.list;this.totalPage = data.page.totalCount;this.pageIndex = data.page.currPage;this.loading_show = false;} else {this.$message({message: "没有找到有效数据",type: "success",});}});},
【必选项提示小方法】vue处理多个条件选择时，判断必选项没有选择的弹出对应的提示【通俗易懂，详细注释】相关推荐
- win7电脑总是提示重新启动计算机以完成重要更新的安装是怎么回事,Win7开机时弹出Windows Update提示，怎样解决？(图文)...
Win7开机时弹出Windows Update提示,怎样解决?最近有一些Win7用户都反映了这样一个问题,就是在开关机的时候,电脑总是弹出"Windows Update"的窗口,同 ...
- mt6735 Audio framework]音量警告提示框选择OK，重启后再增大音量希望还会弹出音量警告提示框
[DESCRIPTION] 目前的做法是: 音量警告提示框选择OK,重启后就不会再弹出警告提示框, 除非恢复出厂设置 如果希望重启后再增大音量希望还会弹出音量警告提示框 请参考如下修改: [SOLUT ...
- 学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式 注意事项 弹出方向 失去焦点隐藏 禁用元素弹出提示框 data属性详解 js方法与事件 方法: 事件: 注意事项 popover提示框组件依赖 ...
- plotplay恢复默认设置_手把手解答win10系统potplayer经常弹出自动更新提示的还原技巧...
电脑犹如汽车,在使用过程中需要正确的方法,否则就会有win10系统potplayer经常弹出自动更新提示的情况出现,要处理win10系统potplayer经常弹出自动更新提示的问题,对于电脑专业人士来 ...
- Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 批量删除，未勾选数据，点击【批量删除】弹出确认删除提示框
批量删除,未勾选数据,点击[批量删除]弹出确认删除提示框 给table组件,添加ref="selections" 在分页方法中,添加方法.设置为空
- iOS中Mach异常和signal信号介绍，以及当APP崩溃时做线程保活弹出程序异常提示框
我们经常会遇到APP闪退和崩溃的问题,那么我们应该通过什么变量去监听APP的异常呢?如何在程序崩溃时,保证程序不闪退,并给用户弹出一个提示框呢? 这是本文将要讲述的内容. 先介绍2个概念,Mach异常 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 用MPLAB IDE编程时，软件总是弹出一个窗口提示： “the extended cpu mode configuration bit is enabled,but the program that
用MPLAB IDE编程时,软件总是弹出一个窗口提示: "the extended cpu mode configuration bit is enabled,but the program ...
最新文章
- 聊一聊Java 泛型通配符 T，E，K，V，?
- 我们为什么要分库分表？
- python中%r和%s的区别
- opengl加载显示3D模型STL类型文件
- python连接oracle数据库_深入理解Python3.6连接Oracle数据库
- python中type用法_Python中type的用法
- java访问本地文件_java 读取本地文件 更改
- CentOS基础操作指令（磁盘分区和挂载）
- 两个形状不同的长方形周长_人教版数学六年级上册 5.2：圆的周长 微课视频|知识点|课件解析|同步练习...
- jquery几种常用框架比较
- R语言非度量多维标尺排序NMDS及一般加性模型GAM映射教程
- 易语言雷电模拟器adb模块制作实现一键模拟器多开
- 读书202101『股票大作手回忆录』
- 百度网盘html资源,百度网盘目录索引搭建教程：如何把百度网盘文件做成在线html目录...
- 虾神段子小剧场：人人都该学点数据分析（1）：达五十万的电竞人才缺口？
- html页面顶部横条,CSS：页面顶部的精简横幅(如本页中的橙色横幅)
- win7查找计算机图片,如何在 win7电脑上查看 HEIC 照片的内容?
- SQL Server 学习5（随机数，整数，编号，序号）
- DDD | 领域驱动设计 Vs 敏捷 Vs 面向对象
- 中职计算机数据库教学总结,中职计算机专业的数据库课程教学