uniapp中checkbox-group多选的全选和取消全选

微信截图_20220616135349.png

主要是给列表的多选框change事件绑定$event和item

<checkbox-group @change="checkSelectItem($event, item)">
    <label>
      <checkbox :value="item.value" :checked="item.checked" />
    </label>
</checkbox-group>

然后在方法中

checkSelectItem(e, item) {
    // 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
    if (item.checked == true) {
        this.$set(item, 'checked', false)
    } else {
        this.$set(item, 'checked', true)
    }
    // 过滤出数组中checked为true的项目，如果和原RecordList长度相等，就全选显示
    let newArr = this.RecordList.filter(item => (item.checked == true))
    if (newArr.length === this.RecordList.length) {
        this.checkTrue = true;
    } else {
        this.checkTrue = false;
        }
    },

全部代码

<!--样本送检列表-->
<template>
    <view class="list-bg">
        <view class="main padding30">
            <view class="box-card" v-for="(item,index) in RecordList" :key="index">
                <view class="list">
                    <view>
                        <view>
                            <text class="text1-style">编号：</text>
                            <text class="text2-style">{{item.ID}}</text>
                        </view>
                        <view><text class="text1-style">时间：</text>
                            <text class="text2-style">{{item.Datetime}}</text>
                        </view>
                        <view>
                            <text class="text1-style">人数：</text>
                            <text class="text2-style">{{item.Amount}}</text>
                        </view>
                    </view>
                    <!--选中图标-->
                    <checkbox-group @change="checkSelectItem($event, item)">
                        <label>
                            <checkbox :value="item.value" :checked="item.checked" />
                        </label>
                    </checkbox-group>

                </view>
            </view>
        </view>
        <!--按扭-->
        <view class="login-btn-box padding30">
            <view style="margin-top:30rpx;">
                <checkbox-group @change="checkSelect" >
                    <label style="display: flex;">
                        <checkbox :checked="checkTrue"></checkbox>
                        <text>全选</text>
                    </label>
                </checkbox-group>
            </view>
        </view>
    </view>
</template>
<script>
    var _this;
    export default {
        data() {
            return {
                checkTrue: false, //全选选中
                //列表
                RecordList: [{
                    ID: '44568745',
                    Name: '张三',
                    Datetime: '2022-05-25 15:30',
                    Amount: '20',
                    value: '1',
                }, {
                    ID: '44568746',
                    Name: '李四',
                    Datetime: '2022-05-25 15:30',
                    Amount: '20',
                    value: '2',
                }],
            };
        },
        methods: {
            //全选
            checkSelect() {
                if (this.checkTrue == true) {
                    this.checkTrue = false;
                    // 遍历RecordList数组 取消全选
                    this.RecordList.forEach(item => {
                        this.$set(item, 'checked', false)
                    })
                } else {
                    this.checkTrue = true;
                    // 遍历RecordList数组 设置全选
                    this.RecordList.forEach(item => {
                        this.$set(item, 'checked', true)
                    })
                }

            },
            checkSelectItem(e, item) {
                // 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
                if (item.checked == true) {
                    this.$set(item, 'checked', false)
                } else {
                    this.$set(item, 'checked', true)
                }
                // 过滤出数组中checked为true的项目，如果和原RecordList长度相等，就全选显示
                let newArr = this.RecordList.filter(item => (item.checked == true))
                if (newArr.length === this.RecordList.length) {
                    this.checkTrue = true;
                } else {
                    this.checkTrue = false;
                }
            },
        }
    };
</script>
<style lang="scss" scoped>
    /*通用页面背景*/
    .list-bg {
        width: 100%;
        height: 100vh;
    }

    /*卡片样式*/
    .box-card {
        margin-bottom: 30rpx;
        margin-top: 10rpx;
    }

    .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .text1-style {
        color: black;
        font-size: 30rpx;
        margin-right: 10rpx;
    }

    .text2-style {
        color: gray;
        font-size: 30rpx;
    }

    .date-style {
        margin: 20rpx 0rpx;
    }

    .login-btn-box {
        width: 100%;
        position: fixed;
        bottom: 5vh;
    }

    .login-btn {
        width: 85%;
        clear: both;
        margin-bottom: 1vh;
        left: 8%;
        z-index: 999;
        transform: translateZ(0);
        bottom: env(safe-area-inset-bottom);
        bottom: constant(safe-area-inset-bottom);
    }
</style>