uniapp中使用原生组件checkbox实现全选功能

代码：

<template>
	<view class="">
		<view class="box">
			<view class="card" v-for="item in data">
				<view class="card_title">
					<checkbox :checked="item.checked" @change="item.checked = !item.checked" />{{item.name}}
				</view>
			</view>
		</view>
		<view class="">
			<view class="">选择个数为：{{totalNumber}}</view>
			
			<checkbox :checked="allSelected" @change="allSelected = !allSelected" />全选
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';

	const data = ref([
		{ name: "商品1", checked: false },
		{ name: "商品2", checked: false },
		{ name: "商品3", checked: false },
		{ name: "商品4", checked: false },
		{ name: "商品5", checked: false }
	])

	// 计算选择个数
	const totalNumber = computed(() => {
		let arrs = data.value.filter(item => item.checked); //筛选出选择的
		return arrs.length;
	});

	// 全选
	const allSelected = computed({
		get() {			//只读属性：判刑是否别全选
		
			// return _.every(data.value, o=>o.selected);			//使用lodash一句代码即可实现
			
			let newArrs = data.value.filter(item => item.checked == false)
			if (newArrs.length == 0) {
				return true
			} else {
				return false
			}
		},
		set(v) {		//写属性：通过点击全选框，来实现商品是否全选
			if (v) {
				data.value.forEach(o => o.checked = true); // 如果全选，那么每一个都选择
			} else {
				data.value.forEach(o => o.checked = false); // 否则，每一个都不选择
			}
		}
	});
</script>

<style scoped lang="scss">
	.card {
		height: 100px;
		background-color: #FFFFFF;
		margin: 10px;
		border-radius: 10px;

		.card_title {
			height: 50%;
			line-height: 60px;
			padding-left: 20px;
			font-weight: bold;
		}

		.card_item {
			display: flex;
			justify-content: space-around;
			// align-items: center;
			padding-left: 20px;

		}
	}
</style>

链接: uni-app官方文档地址