uni-app购物车-全选、反选、逐个选中

最新推荐文章于 2024-06-23 23:59:23 发布

置顶慢半拍、

最新推荐文章于 2024-06-23 23:59:23 发布

阅读量1.1w

点赞数 10

分类专栏： uni-app 文章标签： uni-app check-group 全选和反选

本文链接：https://blog.csdn.net/huanhuan03/article/details/105488388

版权

uni-app 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

这里要实现的需求是：
1，点击全选，则全选，再次点击，则取反
2，全选状态下，取消某一个商品，则全选状态消失
3，有些选中，有些没选的状态下，勾选上所有商品，则全选状态选中
3，商品无货状态下不允许选择，并且不影响全选反选

先看效果：

在这里插入图片描述

首先，用到了checkbox-group这个组件，看看官网API就好了，里面添加的内容是我自己的需求，自己随需求：

<!-- 购物列表 html -->
<view class="listCount">
    <checkbox-group @change="checkboxChange">
        <label class="listItem" v-for="item in carArr" :key="item.value">
            <view class="checkBox">
                <checkbox style="transform:scale(0.9)" :value="item.value" :checked="item.checked"  v-show="item.whether"/>
                <view class="notGoods" v-show="!item.whether">
                    无货
                </view>
            </view>
            <view class="itemShow">
                <view class="listImg">
                    <image :src="item.src" mode="aspectFill" style="width: 100%; height: 100%;"></image>
                </view>
                <view class="itemCont">
                    <view class="itemName">
                        {{item.name}}
                    </view>
                    <view class="itemGrade">
                        品相优良
                        <text class="aliIcon">&#xe658;</text>
                    </view>
                    <view class="itemPriceTool">
                        <view class="price">
                            ￥{{item.price}}
                        </view>
                        <view class="itemTool">
                            <text class="toolTwo" v-show="!item.whether">
                                到货提醒
                            </text>
                            <text class="toolOne" v-show="!item.whether">
                                预定
                            </text>
                            <text class="toolOne" v-show="item.whether"  @click="showBottomVisible = true">
                                锁定
                            </text>
                        </view>
                    </view>
                    <view class="aliIcon">
                        &#xe6a7;
                    </view>
                </view>
            </view>
        </label>
    </checkbox-group>
</view>
<!-- 全选按钮 -->
<checkbox-group @change="changeBook">
    <label>
        <checkbox style="transform:scale(0.9)" :checked="allFlag.checked" :value="allFlag.cb"/> 全选
    </label>
</checkbox-group>






<!-- data 数据-->
allFlag: {
    value: 'cb',
    checked: false
},
carArr: [
    {
        value: 'USA',
        name: '摩根财团',
        price: '25.22',
        whether: true,
        src: 'http://img3m6.ddimg.cn/56/6/28519976-1_l_3.jpg'
    },
    {
        value: 'CHN',
        name: '中国高校之殇',
        price: '5.00',
        whether: true,
        src: 'http://img3m1.ddimg.cn/26/6/28510541-1_l_3.jpg'
    },
    {
        value: 'BRA',
        name: '华夏万军',
        price: '63.09',
        whether: true,
        src: 'http://img3m9.ddimg.cn/22/13/28495489-1_l_9.jpg'
    },
    {
        value: 'JPN',
        name: '音乐迷醉指南',
        price: '13.21',
        whether: true,
        src: 'http://img3m8.ddimg.cn/70/21/28509298-1_l_3.jpg'
    },
    {
        value: 'ENG',
        name: '纸上美术馆',
        price: '36.35',
        whether: true,
        src: 'http://img3m8.ddimg.cn/4/25/28500718-1_l_2.jpg'
    },
    {
        value: 'FRA',
        name: '艺术哲学',
        price: '14.36',
        whether: false,
        src: 'http://img3m8.ddimg.cn/40/9/23525608-1_l_4.jpg'
    },
    {
        value: 'BRAs',
        name: '华夏万军',
        price: '63.09',
        whether: false,
        src: 'http://img3m9.ddimg.cn/22/13/28495489-1_l_9.jpg'
    },
]






<!-- js -->
// 全选或者反选 checkbox
changeBook (e) {
    if (e.detail.value.length == 0) {
        this.carArr.map(item => this.$set(item, 'checked', false))
        this.$set(this.allFlag, 'checked', false)
    } else {
        this.carArr.map(item => this.$set(item, 'checked', true))
        this.$set(this.allFlag, 'checked', true)
    }
},
// list checkbox
checkboxChange (e) {
	var items = this.carArr,
		values = e.detail.value;
	for (var i = 0, lenI = items.length; i < lenI; ++i) {
		const item = items[i]
		if(values.includes(item.value)){
			this.$set(item,'checked',true)
		}else{
			this.$set(item,'checked',false)
		}
	}
	//  商品是否全部勾选，判断全选与否状态
	var offCarArr = []
	this.carArr.forEach(item => item.whether == true? offCarArr.push(item): '')
	let allChecks = offCarArr.every(item => item.checked == true)     
	allChecks ? this.$set(this.allFlag, 'checked', true) :this.$set(this.allFlag, 'checked', false)
},

就是这么多啦，欢迎提问，有帮助请点赞加关注，~~der~~~~