signed

QiShunwang

“诚信为本、客户至上”

uniapp全选全不选

2021/5/15 0:44:15   来源:

uniapp的checkbox-group有点坑,浪费半天的时间才搞明白。。

<template>
	<view>
		<view class="shoplist margin">
			<view class="shopitem align-center flex margin-bottom" >
				<checkbox-group @change="checkeds">
					<view class="margin-right flex align-center margin-bottom" v-for="item in data" :key='item.id'>
						<label class="margin-right">
							<checkbox :value="String(item.id)" :class="{'checked':checkedarr.includes(String(item.id))}" :checked="checkedarr.includes(String(item.id))"/><text></text>
						</label>
						<image :src="item.img" mode="" class="margin-right"></image>
						<view class="shopinfo flex flex-direction">
							<view class="shopname">
								{{item.productName}}
							</view>
							<view class="store">
								{{item.storeName}}
							</view>
							<view class="shoppic">
								数量:{{item.num}}
							</view>
						</view>
					</view>
				</checkbox-group>
				
			</view>
			<checkbox-group @change="alls">
				<label>
					<checkbox value="all" :class="{checked:allcheck}" :checked="allcheck?true:false"/><text>全选</text>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allcheck:false,
				checkedarr:[],
				data: [
				    {
				      "nowPrice": 0.01,
				      "img": "http://img13.360buyimg.com/n1/jfs/t1/168944/19/21061/201690/60861841E84261243/4566813f4c859788.jpg",
				      "productId": "1",
				      "lng": 102.768288,
				      "storeAddress": "云南省昆明市官渡区星耀路450",
				      "oldPrice": 2000,
				      "num": 2,
				      "storeName": "北京路总店",
				      "id": "1",
				      "storeId": 1,
				      "productName": "大健康",
				      "lat": 24.956907
				    },
					{
					  "nowPrice": 0.01,
					  "img": "http://img13.360buyimg.com/n1/jfs/t1/168944/19/21061/201690/60861841E84261243/4566813f4c859788.jpg",
					  "productId": "1",
					  "lng": 102.768288,
					  "storeAddress": "云南省昆明市官渡区星耀路450",
					  "oldPrice": 2000,
					  "num": 2,
					  "storeName": "北京路总店",
					  "id": "2",
					  "storeId": 1,
					  "productName": "大健康",
					  "lat": 24.956907
					},
					{
					  "nowPrice": 0.01,
					  "img": "http://img13.360buyimg.com/n1/jfs/t1/168944/19/21061/201690/60861841E84261243/4566813f4c859788.jpg",
					  "productId": "1",
					  "lng": 102.768288,
					  "storeAddress": "云南省昆明市官渡区星耀路450",
					  "oldPrice": 2000,
					  "num": 2,
					  "storeName": "北京路总店",
					  "id": "3",
					  "storeId": 1,
					  "productName": "大健康",
					  "lat": 24.956907
					}
				  ]
			}
		},
		methods: {
			checkeds(e){
				this.checkedarr = e.detail.value;
				console.log(typeof this.checkedarr)
				if (this.checkedarr.length>0 && this.checkedarr.length==this.data.length){
					this.allcheck = true
				}else{
					this.allcheck = false
				}
			},
			alls(e){
				let values = e.detail.value
				console.log(values)
				if (values == 'all'){
					this.allcheck = true
					for (let item of this.data){
						if (!this.checkedarr.includes(item.id)){
							this.checkedarr.push(item.id)
						}
					}
				}else{
						this.allcheck = false
						this.checkedarr = []
					}
			}
		}
	}
</script>

<style lang="less">
	.shopitem{
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
</style>