uni-app:动态禁止下拉列表展示情况(如果下拉列表数据为空就拦截下拉框展示,显示提示信息)

devtools/2025/1/16 6:56:03/

效果

如下图,需要当批号的下拉栏位存在数据的时候,才会展示下拉框,现在即使数据为空也会展示下拉框


修改后的效果,只出现提示,不展示下拉框

代码

1、页面展示

  •  设置picker下拉框的外层点击事件,点击事件出现提示信息(onchange是选择之后才会执行的,这里不展示下拉框也没有数据,所以不会执行此方法)
  • 设置picker的禁用事件,如果数据为空就禁止,部不为空就启用    
<view class="position_all2"><view class="scan2"><view class="position_line2_1"><view class="line2_1_title">批号:</view><view class="right" @click="onPickerClick"><picker mode="selector" :disabled="!selectDatas3 || selectDatas3.length == 0" :range="selectDatas3" @change="onLotNumChange"><view class="picker">{{selectedLotNum?selectedLotNum:'请选择'}} ></view></picker></view></view></view>
</view>

2、data数据

selectDatas3:存放下拉列表中的数据,这里是全部的批次号

selectedLotNum:从下拉列表中选中的数据,这里是选中的批次号

data() {return {selectDatas3: [], //下拉列表批号的信息selectedLotNum: '', //选择批次号		}
},

3、js

①获取批次号信息get_lotnum

②点击事件判断是否进行不存在提示onPickerClick

③选择事件对下拉列表中数据进行选择执行的方法onLotNumChange

//点击批号出现的效果
onPickerClick() {if (!this.selectDatas3 || this.selectDatas3.length === 0) {uni.showToast({title: '请选择制令单/确认制令单是否存在批号',icon: 'none'});return false; // 阻止默认行为}
},
//选择批号
onLotNumChange(event) {if (!this.selectDatas3) {uni.showToast({title: '请选择批次号',icon: 'none'})} else {this.selectedLotNum = this.selectDatas3[event.detail.value];}
},
// 获取批号
get_lotnum: function(e) {var order_number = this.mip_name;if (order_number) {//查询单号对应的信息uni.request({url: getApp().globalData.position + 'Produce/select_mip_lotnum',data: {order_number: order_number,username: getApp().globalData.username},method: 'POST',dataType: 'json',success: res => {let selectDatas3 = []//拼接新数组工序号-工序名console.log(res)this.selectDatas3 = res.data.lot_num;},fail(res) {console.log("查询失败")}})}
},


http://www.ppmy.cn/devtools/150873.html

相关文章

(STM32笔记)十二、DMA的基础知识与用法 第二部分

我用的是正点的STM32F103来进行学习&#xff0c;板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话&#xff0c;用的也是这个板子和教程。 DMA的基础知识与用法 二、DMA传输设置1、数据来源与数据去向外设到存储器存储器到外设存储器到存储器 2、每次传输大小3、传…

ubuntu20.04中vscode配置django

1.下载插件 我用的是这两个 2.配置环境 Ubuntu20.04创建虚拟环境 python3 -m venv .venv 没有 venv 的记得装一下 sudo apt install python3.8-venv 装好之后&#xff0c;会出现 .venv 的文件夹 找一下 activate &#xff0c;我的在 bin 里 按照提示 source bin/activate…

嵌入式无人机: 防止信号被有意干扰入侵策略

在嵌入式无人机项目中&#xff0c;防止信号被有意干扰或入侵是一个重要的安全问题。有效的防护措施可以从硬件、软件和通信协议等多个方面入手&#xff0c;确保系统的稳定性和安全性。以下是详细的防护策略&#xff1a; 1. 物理层保护 频率跳变&#xff08;Frequency Hopping…

LeetCode 热题 100 | 普通数组

普通数组基础 动态规划五部曲&#xff1a; 1.确定dp数组的含义 2.递推公式 3.dp数组初始化 4.遍历顺序 5.模拟dp数组合并区间提前排序好数组轮转数组先翻转全部元素&#xff0c;再根据k % nums.length来翻转不同区间。前缀和&#xff0c;后缀和的提前计算。如果想省空间&#x…

funcaptcha手势指向验证码识别

注意&#xff0c;本文只提供学习的思路&#xff0c;严禁违反法律以及破坏信息系统等行为&#xff0c;本文只提供思路 如有侵犯&#xff0c;请联系作者下架 本文滑块识别已同步上线至OCR识别网站&#xff1a; http://yxlocr.nat300.top/ocr/other/21 该验证码会给出某物品所有的…

JAVA多线程学习

文章目录 线程相关概念线程创建继承Thread类Runnable接口多个线程同时操作同一个对象测试&#xff1a;实现callable接口(了解)静态代理lamda表达式 线程状态线程停止线程休眠线程礼让 线程相关概念 线程&#xff1a;是进程的一部分&#xff0c;一个进程之内的线程之间共享进程的…

基于禁忌搜索算法的TSP问题最优路径搜索matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于禁忌搜索算法的TSP问题最优路径搜索&#xff0c;旅行商问题&#xff08;TSP&#xff09;是一个经典的组合优化问题。其起源可以追溯到 19 世纪初&#xff0c;…

CSS3的aria-hidden学习

前言 aria-hidden 属性可用于隐藏非交互内容&#xff0c;使其在无障碍 API 中不可见。即当aria-hidden"true" 添加到一个元素会将该元素及其所有子元素从无障碍树中移除&#xff0c;这可以通过隐藏来改善辅助技术用户的体验&#xff1a; 纯装饰性内容&#xff0c;如…