微信小程序--cascaser，联机选择器

用的是uview组件库

HTML

<view class="contract-type">
				<label style="margin-left: 5rpx;">参与者</label>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db " @click="selectShows = true">
							<u-select mode="single-column" v-model="selectShows" :list="list" @confirm="(val)=>confirm(val,2,frist)"></u-select>
								<view class="cyzclass" v-for="(item,index) in cyzList_no" :key="index">
										<span @click.stop="cursorFn(item,index)">{{ item }}</span>
								</view>
							
						</view>
					</view>
				</view>
			</view>
<!-- 删除提交弹窗 -->
			<view class="setup-out" v-show="deleteShow">
				<view class="setup-out-text">确定是否删除 <span style="color: red;">{{peopleName}}</span></view>
				<view class="setup-btn">
					<button @click="deleteShow = false">取消</button>
					<button @click="deleteFN">确定</button>
				</view>
			</view>

js

data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
		    deleteShow:false,
			selectShows:false,
			user_id:'',
			peopleName:'',
			list: [],
			cyzList_no:[],
			frist:'',
			to_do_user_no:'',
			params: {
				to_do_title: null,
				to_do_list: null,
				to_do_user_no: '',
				to_do_user_list:[],
				to_do_time: currentDate,
				to_do_plan_time: currentDate,
				to_do_deadline: currentDate,
				to_do_state: 1,
				to_do_remark: null
			},
		};
	},
	methods: {
			// select点击事件
		confirm(e,num,frist) {
			if(num == 1){
				this.to_do_user_no = e[0].label;
				this.params.to_do_user_no = e[0].value;
				
			}else if(num == 2) {
				this.cyzList_no.push(e[0].label);
				this.cyzList_no = [...new Set(this.cyzList_no)];
				if(frist == 1){
					// this.params.to_do_user_list = [];
					this.frist = this.frist + 1;
				}
				this.params.to_do_user_list.push(parseInt(e[0].value));
				this.params.to_do_user_list = [...new Set(this.params.to_do_user_list)];
			}
		},
		// 点击小手
		cursorFn(item,index){
			this.peopleName = item;
			this.user_id  = index
			this.deleteShow = true;
		},
		deleteFN(){
			this.params.to_do_user_list.splice(this.user_id , 1);
			this.cyzList_no.splice(this.user_id , 1);
			uni.showToast({
				title: '删除成功',
				icon: 'success',
				duration: 1000
			});
			this.deleteShow = false;
		},
	}

style

<style lang="scss" scoped>
.contract-type {
	position: relative;
	margin-left: 35rpx;
	margin-top: 50rpx;
	display: flex;
	.type {
		width: 192rpx;
		height: 50rpx;
		border: 1rpx solid #cccccc;
		border-radius: 6rpx;
		padding-left: 10rpx;
	}
	/deep/.uni-list-cell-db {
		// height: 50rpx !important;
		width: 420rpx !important;
		border-radius: 5rpx;
		border: 1px solid #cccccc;
		line-height: 50rpx;
		padding-left: 5rpx;
		background-color: #ffffff;
		display: flex;
		flex-wrap: wrap;
	}
}
.cyzclass{
	overflow: hidden;
	margin-right: 10rpx;
	z-index: 9999;
	cursor: pointer;
}

</style>

总结：使用select与for循环，push数组即可实现多选择，splice即可实现单个删除