uni-app中使用checkox实现多选的全选和反选

<template>
	<view class="container">
		<view class="head">
			<view class="btn" @tap="onSelectAll">
				{{selectAll?'取消全选':'全选'}}
			</view>
			<uni-search-bar v-model="searchValue" class="search" bgColor="#F7F8FA" radius="100"
				placeholder="搜索单位"></uni-search-bar>
		</view>
		<view class="uni-list">
			<checkbox-group @change="onChangeGroup">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
					<view>
						<checkbox :value="item.value" :checked="checkList.includes(String(item.value))" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchValue: "",
				selectAll: false,
				checkList: [],
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
			}
		},
		methods: {
			// 全选和反选
			onSelectAll() {
				this.selectAll = !this.selectAll;
				this.checkList = this.selectAll ? this.items.map(item => item.value) : [];
			},
			// 切换多选
			onChangeGroup(e) {
				this.checkList = e.detail.value;
				this.selectAll = this.checkList.length === this.items.length ? true : false;
			}
		}
	}
</script>

<style lang="scss">
	.head {
		background-color: #fff;
		display: flex;
		height: 128rpx;
		align-items: center;
		padding: 0 32rpx;
		justify-content: space-between;

		.btn {
			color: #4284E5;
			font-size: 30rpx;
		}

		.search {
			width: 266px;
		}
	}

	/deep/ .uni-searchbar {
		padding: 0;
	}
</style>