【uniapp】自定义复选框限制选择个数

<template>
	<view class="c_item_Box">
		<view v-for="(item, index) in itemsCheckboxList" :key="index" @tap="itemCheckboxChange(item)">
			<view :class="item.checked?'c_item_class_active':'c_item_class'">
				{{item.labelName}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return{
				itemsCheckboxList: [],  // 自己定义或根据接口获取数据
				List:[],  // 放选中的数据
			}
		},
		onLoad() {
			this.getItemsList()
		},
		methods: {
			getItemsList() {
				let paramsData = {
					customerNo: 123,
				}
				this.$http.get(
					'/xxx/xxx/xxx', {
						params: {
							...paramsData
						}
					}).then(res => {
					this.itemsCheckboxList = res.data.data
					this.itemsCheckboxList.forEach(item => {
						if (item.isHave) {//判断选中
							item.checked = true
							this.List.push(item)  // 
						} else {
							item.checked = false
						}
					})
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '网络错误,请重试'
					})
					console.log(JSON.stringify(err));
				})

			},
			
			itemCheckboxChange(e) {
				e.checked = !e.checked;
				if (this.List.length >= 3 && !this.List.some(i => i.labelCode == e.labelCode)){
					uni.showToast({
						title: '最多只能选3个',
						duration: 2000
					});
					e.checked = !e.checked; // 取消选中状态
					return;
				}
				const index = this.List.findIndex(i => i.labelCode === e.labelCode);
				if (index !== -1) {
					this.List.splice(index, 1);
				}else {
					this.List.push({
						labelType: e.labelType,
						labelCode: e.labelCode,
						labelName: e.labelName,
					});
				}
				this.$forceUpdate();
			},
		}
	}

</script>