uniapp实现input和select联用

近期在写小程序的时候,有一个需求,页面可以查询,填写的查询条件是选择的,而不是输入的,所以想着效果为,点击输入框,弹出选择框,选择对应信息并回显至输入框。

效果如下:

uniapp实现input和select联用_第1张图片

 点击之后:

uniapp实现input和select联用_第2张图片

 选择并且确定:

uniapp实现input和select联用_第3张图片

然后就可以通过储存的value进行条件查询了

上代码:

vue:代码 


			
		

methods: {
			StroageConfirm(e) {
			console.log(e);
			this.searchForm.storageId=e[0].value
			this.storage=e[0].label
				},
}

根据uview官网给的要求,select所接受的数组必须包含 label(显示出来的信息),value(真正存到查询参数里的值,通常情况为Id)

细节:

show 控制select是否显示出来,mode为select的模式,根据官网有三种,可以自行参考uview官网

list 就是数据源,也就是从接口获得的数据,如果没有上述提到的label和value可以手动添加,具体如下:

this.storages.forEach(e=>{
						e.value=e.id;
						e.label=e.name;
					})

这些得到的数据域便包含这些数据 

input的回显便是由v-model控制,建议不要和数据域里的数据混为一体,另外定义出一个,比如上面就定义了storage,在confirm方法中把取到的label赋给回显值storage 

你可能感兴趣的:(vue)