Uniapp选择用户selelt封装组件，可多选，附带可搜索

 Uniapp选择用户selelt封装组件，可多选，附带可搜索，移动端APP或H5会经常用到选择器，今天就把他拿出来分享记录了，支持单选，多选，可搜索，

先看效果图: 

 

 前面页面：

<u-form-item label="终端用户"  required  prop="farmer" right-icon='arrow-right'>
	<u-input input-align='right' v-model="form.farmer" placeholder="请选择终端用户" type="text" disabled @click="chooseFarmer()" />
</u-form-item>

点击事件 

    methods: {
	    chooseFarmer() {
	    	uni.navigateTo({
				url: '/pages/choose_page/choose_page?index=0&checked=1&name=farmer'
			})
		},
    }

 onLoad监听方法

onLoad(options) {
    uni.$on('chooseFarmer',(data) => {
	    console.log(data,'data===')
		let arr = []
		arr.push(data.id)
		this.form.farmerIds = arr;
		this.form.farmer = data.name
		console.log(this.form.farmerIds,' this.form.farmerIds===',this.form.farmer )
		this.$forceUpdate()
	})
}

在用户退出页面时，销毁监听

    methods:{
        //销毁事件
	    offEvent() {
		    uni.$off('chooseCustomer');
	    },
    },
//用户关闭页面时销毁监听
    onBackPress() {
	     this.offEvent()
    },
    onUnload() {
	    this.offEvent()
	},

 choospage.vue

<template>
  <view class="flex-1 flex_column">
	<ChooseFarmer ref='child' :param='param' v-if="componentsName=='farmer'" :index='index'></ChooseFarmer>
  </view>

</template>
<script>
import ChooseFarmer from "./choose_farmer.vue";//选择终端用户 快速调整

export default {
  components: {
        ChooseFarmer
  },
  data() {
    return {
      componentsName: "",
      index: 0,
		typeName:false,
		param:{},
		checked:false,
		tempParam:{}
    };
  },
  methods: {},
  onLoad(e) {
	  console.log(e,'eeeeeeeeeeeeeeeeeeeee')
	  this.tempParam=e;
	  if(e.name=="giftgoods"&&!e.warehouse_id&&e.booking!=1){
		  this.param={name:'warehouse'}
	  }else{
		 		this.param=e 
	  }

    var pages = getCurrentPages();
    console.log(pages);
    this.componentsName = this.param.name;
		this.checked=e.checked||false;
    this.index = e.index ? String(e.index) : "0";
		this.typeName=((e.type==3&&this.index==1)||e.name=='visit')?true:false;
		console.log(this.typeName)
	let m=e.type==3?"客户":"调入客户";
    let arr = {
      customer: ["调出客户",m,'客户','开票客户','开票客户'],
      warehouse: ["仓库","仓库"],
      visit: 
			farmer:['终端用户'],//终端用户
    };
	console.log( arr[this.componentsName],[Number(this.index)])
		 this.utils.setNavigationBarTitle("选择" + arr[this.componentsName][Number(this.index)])
 
		if(!this.checked){
			this.utils.hideButton(0);
		}
		let page=getCurrentPages();
  },
  onShow() {
	  this.$refs.child&&this.$refs.child.show&&this.$refs.child.show(); 
  },
  //上拉加载
  onReachBottom() {
    this.$refs.child.ReachBottom();
  },
  //下拉加载
  onPullDownRefresh() {
	  uni.stopPullDownRefresh();
   // this.$refs.child.initPage();
  },
	onNavigationBarButtonTap() {
		console.log(123456)
		if(this.checked){
		this.$refs.child.confirmOk();
		}
	},
onBackPress() {
	console.log(122)
},
onUnload() {
	console.log(333333)
},
onHide() {
	console.log(555)
}
};
</script>

  farmer.page

<template>
	<view class="content_warp bg_fff">
		<!-- <view class="app_row" :style="serachStyle"> -->
		<serach-top @click='serachData'></serach-top>
		<!-- 如果有数据，则显示数据 -->
		<view class="son_content" style="padding:0;">
			<!-- <checkbox-group @change='changeCheck'> -->
			<view v-for="(item,index) in dataList" :key="index">
				<card-circle :item='item'>
					<block slot='title'>
						<radio :value="item.value" @tap='clickFun(item)' :checked="item.id==current.id"
							class="scaleSmall2" />
						<!-- <checkbox :value="item.serial_number" :checked='item.serial_number|checkedFilter(checkArr)'  style="transform:scale(0.7)" /> -->
						<text class="returned_company ">终端用户名称:{{item.name}}</text>
					</block>
					<block slot='body'>
						<view class="inlineBlock">
							<text class="inventory_details_left text_nowrap">联系人</text>
							<text class="inventory_details_right text_nowrap">{{item.contacts_name||''}} {{item.user_name||''}}</text>
						</view>

						<view class="inlineBlock">
							<text class="inventory_details_left text_nowrap">地区</text>
							<text
								class="inventory_details_right text_nowrap">{{item. province_name || ''}}</text>
						</view>
						<view class="inlineBlock">
							<text class="inventory_details_left text_nowrap">详细地址</text>
							<text class="inventory_details_right text_nowrap">{{item.address|| ''}}</text>
						</view>
					</block>
				</card-circle>
			</view>
			<!-- </checkbox-group> warnColor 颜色 -->
		</view>
		<view v-if="!(loadingType==2&&dataList.length==0)">
			<load-more :loadingType="loadingType"></load-more>
		</view>
		<no-data v-else></no-data>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			index: {
				type: String,
				default: '0'
			},
			param: {}
		},
		components: {

		},

		computed: {
			...mapState(["itemDetail"]),
		},
		data() {
			return {
				url: {
					dataList: 'xxxxxxxxxx',
				},
				loadingType: 0,
				// 页面主题所需要的数据
				dataList: [],
				paramPage: {
					page: 1,
					limit: 20,
					farmer: ''
				},
				isShow: true,
				name: "farmer",
				current: {}
			};
		},
		methods: {
			...mapMutations(['setItemDetail']),
			serachData(v) {
				this.serach = v;
				this.initPage()
			},

			clickFun(item) {
				this.current = item;
			},
			initPage() {
				this.datas = [];
				this.paramPage.page = 1;
				this.loadingType = 0;
				this.getDataList();
			},
			ReachBottom() {
				this.loadingType = 0;
				this.paramPage.page = this.paramPage.page + 1;
				this.getDataList();
			},
			//加载页面主数据
			getDataList() {
				console.log(2);
				if (this.loadingType == 2 || this.loadingType == 1) {
					return;
				}
				this.loadingType = 1;
				let self = this;
				this.paramPage.farmer = this.serach
				this.$fly.post(this.url.dataList, this.paramPage).then(res => {
					let data = res.data;
					console.log(data);
					if(data.page.list.length == 0){
						uni.showToast({
							title:'暂无数据~',
							icon:'none',
							duration:3000
						})
					}
					if (!data.page) data.page = data;
					if (self.paramPage.page == 1) {
						self.dataList = data.page.list;
					} else {
						self.dataList = self.dataList.concat(data.page.list);

					}
					self.loadingType = self.paramPage.page < data.page.totalPage ? 0 : 2;
					// self.paramPage.page = data.page.currPage + 1;
					uni.stopPullDownRefresh();
				}).catch(res => {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
					uni.stopPullDownRefresh();
				});

			},
			chooseMenu(index) {
				this.chooseNav = index;
				//以后这里还需要请求后台数据
				this.initPage();
				//this.serachData();
			},
			confirmOk() {
				if (!this.current.id) return this.utils.toast('请选择')
				console.log(this.current,'=====this.current选中终端用户')
				this.setItemDetail(this.current);
				if(this.param){
					console.log(this.param,'====这个是携带参数的终端用户')
					uni.$emit('chooseFarmer',this.current,this.param)
				}else{
					console.log(this.param,'====这个是没携带参数的终端用户')
					uni.$emit('chooseFarmer',this.current)
				}
				uni.navigateBack({})
			}
		},
		mounted() {
			this.paramPage = Object.assign({}, this.paramPage, this.param)
			this.initPage();
		},
	}
</script>

<style>
	.uni-list-cell {
		padding: 0 30upx;
	}

	.uni-list-cell:after {
		left: 0;
	}

	.content_warp .son_content {
		padding-bottom: 1px;
	}
</style>

 🧨🧨🧨最后附上效果图:

 

 

 🧨🧨🧨 学友哥爱你