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

embedded/2025/1/18 19:00:44/

效果

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


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

代码

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/embedded/155018.html

相关文章

Flask表单处理与验证

Flask是一个轻量级的Python框架&#xff0c;它通过扩展库提供了对表单处理与验证的支持。WTForms是一个流行的Flask扩展库&#xff0c;用于创建和验证Web表单。它提供了一种声明式的方法来定义表单结构和验证逻辑&#xff0c;使得表单处理更为简洁和优雅。下面&#xff0c;我们…

2013年IMO几何预选题第4题

在 △ A B C \triangle ABC △ABC 中, A B < A C AB < AC AB<AC. P P P, Q Q Q 是直线 A C AC AC 上的两个不同的点, 满足 ∠ P B A ∠ Q B A ∠ A C B \angle PBA \angle QBA \angle ACB ∠PBA∠QBA∠ACB, 且 A A A 在 P P P 与 C C C 之间. 已知在线段…

72_List列表原理

1.List列表介绍 在Redis的List数据类型中,元素以字符串形式存在,并按照它们被插入的顺序进行有序排列。List允许元素重复,即相同元素可以被多次添加到列表中。每个List的容量上限为2的32次方减1,,也就是4294967295个元素。我们可以添加一个新元素到List列表的头部(左边)…

后端程序打成 JAR 包的详细步骤及解释

在后端开发中&#xff0c;将程序打成 JAR 包是一个常见的操作&#xff0c;它可以方便程序的部署和分发。本文将详细介绍几种将后端程序打成 JAR 包的方法及其相应的解释&#xff0c;帮助你更好地完成项目的打包工作。 一、使用 Maven 构建工具&#xff08;适用于 Maven 项目&a…

计算机网络常见协议

目录 OSPF(Open Shortest Path First) NAT(Network Address Translation) ICMP (Internet Control Message Protocol) HTTPS&#xff08;SSL/TLS加密&#xff09; HTTPS协议 1. 对称加密 2. 非对称加密 3. 证书验证 4. 回顾https协议传输流程 HTTP TCP UDP 1. TCP&a…

01、kafka知识点综合

kafka是一个优秀大吞吐消息队列&#xff0c;下面我就从实用的角度来讲讲kafka中&#xff0c;“kafka为何有大吞吐的机制”&#xff0c;“数据不丢失问题”&#xff0c;“精准一次消费问题” 01、kafka的架构组织和运行原理 kafka集群各个节点的名称叫broker&#xff0c;因为kaf…

算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集)

算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集) 目录 算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集)FashionMINIST 图像分类原理解析1. 全连接的原理图2. 背景介绍3.引入相关库函数4. 数据预处理5. 模型设计6. 初始化网络&#xff0c;损失函数与…

app版本控制java后端接口版本管理

java api version 版本控制 java接口版本管理 1 自定义 AppVersionHandleMapping 自定义AppVersionHandleMapping实现RequestMappingHandlerMapping里面的方法 public class AppVersionHandleMapping extends RequestMappingHandlerMapping {Overrideprotected RequestCondit…