crm-uni/components/select/select.vue

<template>
	<view>
		<view class="text">
			<view class="qx" @click="close('showarea') ">{{$t('cancel')}}</view>
			<view class="qd" @click="arerfn">{{$t('confirm')}}</view>
		</view>
		  <view class="popup-content">
			<!-- 搜索框 -->
			<u-input
			  v-model="searchKeyword"
			  :placeholder="$t('keyword')"
			  @input="handleSearch"
			></u-input>
	
			<!-- 选项列表 -->
			<scroll-view scroll-y class="option-list">
			  <view
				v-for="(item, index) in areaList"
				:key="index"
				class="option-item"
				@click="handleSelect(item)"
				:class="actives==item.id?'actives':''"
			  >
				{{ item.name }}
			  </view>
			  <view v-if="filteredOptions.length === 0" class="no-data">
				{{$t('noresults')}}
			  </view>
			</scroll-view>
		  </view>
	</view>
</template>

<script>
	export default {
		name:"select",
		props: {
			showarea: {
				type: Boolean,
				default: true
			},
			areaList:[],
		},
		data() {
			return {
				searchKeyword:'',
				filteredOptions:'',
				
			};
		},
		methods:{
			// 搜索处理函数
			handleSearch(){
			  if (this.searchKeyword) {
				console.log(this.searchKeyword)
				this.filteredOptions = this.areaList.filter((item) =>
				  item.name.includes(this.searchKeyword)
				);
				console.log(this.filteredOptions)
			  } else {
				// 如果搜索框为空，显示全部数据
				this.filteredOptions = this.areaList;
			  }
			},
			// 选择选项
			handleSelect(item) {
			  this.selectedLabel = item.name; // 回显选中的值
			  // this.searchKeyword = item.name
			  this.actives = item.id
			  // this.showPicker = false; // 关闭弹窗
			  console.log("选中的值:", item.id);
			  console.log("选中的值:", item.name);
			},
			arerfn(){
				 this.showPicker = false; // 关闭弹窗
				 this.country_name = this.selectedLabel
				 this.userinfo.country_id = this.actives
				 
			},
			close(val){
				this[val] = false
			},
		}
	}
</script>

<style lang="scss">
.actives{
		background-color: #dfdfdf;
	}
	.text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 30px;
		padding: 10px 15px 0px;
		.qd{
			color: #3471FF;
		}
	}
	.popup-content {
	  padding: 20px;
	  background-color: #fff;
	}
	
	.option-list {
	  max-height: 400rpx;
	  margin-top: 20rpx;
	}
	
	.option-item {
	  padding: 20rpx;
	  border-bottom: 1rpx solid #eee;
	}
	
	.option-item:last-child {
	  border-bottom: none;
	}
	
	.no-data {
	  text-align: center;
	  padding: 20rpx;
	  color: #999;
	}
</style>