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

最新推荐文章于 2025-10-14 11:49:13 发布

原创

最新推荐文章于 2025-10-14 11:49:13 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

文章介绍了如何在uniapp中封装一个用户选择器组件，该组件适用于移动端APP或H5，支持单选、多选以及搜索功能。通过示例代码展示了组件的使用方法，包括点击事件处理、监听方法的生命周期管理。同时，提供了选择器页面的实现细节，如数据加载和用户交互处理。

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()
	},