uniapp实现input和select联用

最新推荐文章于 2025-04-14 18:08:31 发布

Yoke______

最新推荐文章于 2025-04-14 18:08:31 发布

阅读量6.6k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Yoke______/article/details/119783427

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Vue开发过程中，实现在页面上通过点击输入框弹出选择框进行条件查询的功能。通过`<u-input>`配合`<u-select>`组件，展示如何设置数据源、控制显示与回显，并提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果如下：

点击之后：

选择并且确定：

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

上代码：

vue：代码

<view class="u-padding-left-30 u-padding-right-30 u-margin-top-30">
			<template>
				<u-input v-model="storage" :type="type" :border='true' @click="show = true"   placeholder="请选择所属仓库" style="border-radius: 10px;"/>
				<u-select v-model="show" mode="single-column" :list="storages" @confirm="StroageConfirm"></u-select>
			</template>
		</view>

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