uni-app中全選多選單選

<template>
    <view>
        <!-- 單個復選框 -->
        <checkbox-group class="block" @change="checkboxChange">
            <view class="cu-form-group">
                <view class="title">復選選操作(checkbox)</view>
                <checkbox :class="isChecked?'checked':''" :checked="isChecked?true:false" value="1"></checkbox>
            </view>
        </checkbox-group>
        
        <!-- 多個復選框，帶全選 -->
        <view>
            <checkbox-group class="block" @change="changeCheckbox">
                <view v-for="item in checkboxData" :key="item.value">                
                    <checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" :class="{'checked':checkedArr.includes(String(item.value))}"></checkbox>
                    <text>{{item.label}}</text>
                </view>
            </checkbox-group>
        </view>
        <view>
            <checkbox-group @change="allChoose">
                <label>
                    <checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全選
                </label>
            </checkbox-group>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isChecked:false,
                checkboxData:[
                    {'value':0,'label':'選項一'},
                    {'value':1,'label':'選項二'},
                    {'value':2,'label':'選項三'},
                    {'value':3,'label':'選項四'},
                    {'value':4,'label':'選項五'},
                    {'value':5,'label':'選項六'},
                    {'value':6,'label':'選項七'},
                    {'value':7,'label':'選項八'},
                    {'value':8,'label':'選項九'},
                    {'value':9,'label':'選項十'}
                ],
                checkedArr:[], //復選框選中的值
                allChecked:false //是否全選
            }
        },
        methods: {
            // 單個復選框事件
            checkboxChange(e) {
                let values = e.detail.value;
                if(values[0]==1){
                    this.isChecked=true;
                }else{
                    this.isChecked=false;
                }
            },
            // 多選復選框改變事件
            changeCheckbox(e){
                this.checkedArr = e.detail.value;
                // 如果選擇的數組中有值，並且長度等於列表的長度，就是全選
                if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){
                    this.allChecked=true;
                }else{
                    this.allChecked=false;
                }
            },
            // 全選事件
            allChoose(e){
                let chooseItem = e.detail.value;
                // 全選
                if(chooseItem[0]=='all'){
                    this.allChecked=true;
                    for(let item of this.checkboxData){
                        let itemVal=String(item.value);
                        if(!this.checkedArr.includes(itemVal)){
                            this.checkedArr.push(itemVal);
                        }
                    }                    
                }else{
                    // 取消全選
                    this.allChecked=false;
                    this.checkedArr=[];
                }
            }
        }
    }
</script>