当前位置：首页 > article >正文

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

article 2025/1/18 12:43:11

效果

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

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

代码

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.kler.cn/a/507839.html