【picker-view】uni实现带有搜索框的选择器（懒得翻代码，写在这好cv）

样式根据需求调整

组件部分：

<template>
	<view class="">
		<!-- 查询  start-->
		<view class="date-background" v-show="flag">
			<view class='date-gray-background' @click="hiddeDatePicker"></view>
			<view class='date-container'>
				<view class="transparent">
					<view class='date-confirm'>
						<view @click="hiddeDatePicker" class="pickerCancel">取消</view>
						<u--input cursorSpacing='500' v-model="searchValue" placeholder="请输入要搜索的学号或姓名" border="surround"
							@change='searchChange'></u--input>
						<view @click="confirm1" class="pickerConfirm">确定</view>
					</view>
					<picker-view indicator-class="indicator" :value="setValues" @change="bindChange"
						indicator-style="height: 70rpx;" mask-style="height:900rpx;"
						style="width: 100%; height: 80%;position:absolute;bottom:0rpx;text-align:center;background:white">
						<picker-view-column class="pickViewColumn">
							<view v-for="item in dataSource" :key="item.xh" style="line-height: 68rpx">
								{{item.xm}}({{item.xh}})
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
		<!-- 查询 end -->
	</view>
</template>

<script>
	import xsqjService from "@/api/xsqj/xsqjService"
	export default {
		props: {
			/**
			 * picker默认展示的值,目前没有用到，当前用到的默认值是setValues
			 */
			value: {
				type: Array,
				default () {
					return [0]
				}
			},
		},
		components: {},
		data() {
			return {
				dataSource: [],
				dataSourceCopy: [],
				flag: false,
				searchValue: '', // 搜索值
				setValues: [6], // picker 选择值，老板要求选中的框子要在中间所以我默认选中的下标为6
				inputForm: {
					xh: '',
					xm: ''
				}
			}
		},
		created() {
			this.getXs() //接口我放在组件里面获取了，因为从父组件传过来数据太慢会导致第一次打开页面没数据
		},
		methods: {
			// 获取学生
			async getXs() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await xsqjService.getxslist();
				this.dataSource = res;
				this.dataSourceCopy = res;
				this.dataSource.forEach((item, index) => {
					if (this.setValues[0] == index) {
						this.inputForm.xh = item.xh;
						this.inputForm.xm = item.xm
					}
				});
				uni.hideLoading()
			},
			// 查询
			pinpaiFun() {
				this.flag = true;
			},
			// 滚动下标
			bindChange(e) {
				console.log(e.detail.value.toString());
				let value = e.detail.value.toString();
				this.dataSource.forEach((item, index) => {
					if (value == index) {
						this.inputForm.xh = item.xh;
						this.inputForm.xm = item.xm
					}
				});
			},
			hiddeDatePicker() {
				this.flag = !this.flag
			},
			showDatePicker() {
				this.flag = !this.flag
			},
			confirm1(e) {
				this.flag = !this.flag;
				this.$emit('recload', this.inputForm);
			},
			// 搜索查询
			searchChange(e) {
				// 模糊搜索，也可以用接口查询
				if (this.searchValue) {
					this.dataSource = this.dataSourceCopy.filter((item) => {
						if (item.xh.indexOf(e) > -1 || item.xm.indexOf(e) > -1) {
							return true
						}
					})
					if (this.dataSource.length > 0) {
						this.setValues = [6]
						this.dataSource.forEach((item, index) => {
							if (this.setValues[0] == index) {
								this.inputForm.xh = item.xh;
								this.inputForm.xm = item.xm
							}
						});
					} else {
						this.inputForm.xh = '';
						this.inputForm.xm = ''
					}

				} else {
					this.dataSource = this.dataSourceCopy
					this.setValues = [6]
					this.dataSource.forEach((item, index) => {
						if (this.setValues[0] == index) {
							this.inputForm.xh = item.xh;
							this.inputForm.xm = item.xm
						}
					});
				}
			}
		},
	}
</script>

<style lang='scss' scoped>
	.date-background {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.date-gray-background {
		position: absolute;
		width: 100%;
		top: 0rpx;
		background: rgba(0, 0, 0, .5);
		height: calc(100% - 500rpx);
	}

	.chaxunjieguo {
		width: 100%;
		height: 500rpx;
		overflow: scroll;
		color: black;
	}

	.chaxunjieguo text {
		display: block;
		text-align: center;
		padding-bottom: 10rpx;
	}

	.date-container {
		position: absolute;
		width: 100%;
		height: 960upx;
		overflow: hidden;
		background: #fff;
		bottom: 0;
		z-index: 1000;
	}

	.date-confirm {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		font-size: 34rpx;
		line-height: 100rpx;
		z-index: 2;
		// line-height: 70rpx;
		// color: var(--ThemeColor)
	}

	.pickViewColumn {
		height: 900rpx;
		/* margin-top: -300rpx; */
	}

	.indicator {
		height: 80rpx;
		/* border: 1rpx solid #E5E8E8; */
	}

	.pickerCancel {
		font-size: 30rpx;
		color: #777;
		margin-right: 30rpx;
	}

	.pickerConfirm {
		font-size: 30rpx;
		color: #4C83D6;
		margin-left: 30rpx;
	}
</style>

使用：

          <template>
             <view>
				<u-form-item label="学号:" prop="xh" borderBottom>
					<view class="ruku">
						<view class="formbox">
							<view class="formitem flex_align_center">
								<view class="forminput" @click="searchxh">
									<text v-if="inputForm.xh">{{inputForm.xh}}</text>
									<text class="graytext" v-else> 请选择学号 </text>
								</view>
							</view>

							<!-- 1. 组件使用  -->
							<studentPicker :value="defaultValue" ref="studentPicker" @recload='getbrand'>
							</studentPicker>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="姓名:" prop="xm" borderBottom>
					<u--input disabled v-model="inputForm.xm" border="none"></u--input>
				</u-form-item>
            </view>
         </template>

<script>
	export default {
		data() {
			return {
                inputForm:{
                    xm:'',
                    xh:''
                }
				defaultValue:[0], // 默认值
			}
		},
		methods: {
			// 学号查询
			searchxh() {
				this.$refs.studentPicker.showDatePicker();
			},
			// 接收父组件的值
			getbrand(data) {
				this.inputForm.xm = data.xm;
				this.inputForm.xh = data.xh;
			},
		}
	}
</script>

<style lang="scss">
	.formbox .formitem {
		margin-bottom: 10rpx;
	}

	.formbox .formitem .formlabel {
		width: 180upx;
		color: #666666;
		font-size: 28upx;
	}

	.formbox .formitem .forminput {
		border-radius: 10upx;
		border: 1rpx solid #e5e5e5;
		width: 350rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 24rpx;
	}


	.formbox .formitem .forminput .downimg {
		position: absolute;
		right: 16rpx;
		top: 25%;
		width: 32rpx;
		height: 32rpx;
	}

	.formbox .formupbox .formlabel {
		width: 100%;
		height: 100%;
	}

	.formbox .formupbox .formupload {
		margin-top: 22rpx;
	}

	.formbox .form_input .u-input {
		width: 490rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.formbox .textarea {
		width: 490rpx;
		border: 1rpx solid #DBDBDB;
		border-radius: 8rpx;
		padding: 10rpx 15rpx;
		font-size: 30rpx;
	}

	.formbox .placeholderStyle {
		color: #c0c4cc;
		font-size: 30rpx;
	}

	.formbox /deep/ textarea,
	.formbox /deep/.uni-textarea-wrapper {
		width: 460rpx !important;
	}

	.flex_align_center {
		display: flex;
		align-items: center;
	}
</style>