vue element 的el-checkbox-group默認全部選中

<!--標注選擇標簽彈層組件-->
<template>
    <div class="message-box dialog-mask">
        <div class="dialog-content">
 
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <div class="dialog-body">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="(city,index) in labels" :label="city.name" :key="index">{{city.name}}
                        <span class="spanClo" :style="{'background-color':city.color}"></span>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <footer class="text-but">
                <el-button class="dialog-content1" type="text" size="mini" @click="$close(false)">取消</el-button>
                <el-button class="dialog-content1" type="text" size="mini" @click="labelDetermine">確定</el-button>
            </footer>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checkAll: false,
                checkedCities: ['小泡狀', '上海'],
                allElection: [], // 全選
                selectionArr: [], // 選中要傳給后台的數據 對象
                isIndeterminate: true
            }
        },
        props: {
            labels: Array,
        },
        mounted() {
            this.allElectionFun();
            this.DefaultFullSelection();
        },
        methods: {
            async labelDetermine() {
                // if (code == 0) {
                console.log(this.selectionArr);
                this.$close(this.selectionArr)
                // } else if (code == 1) {
                //     this.$message({
                //         message: msg,
                //         type: "warning",
                //         duration: 1200
                //     });
                // }
            },
            DefaultFullSelection(){ // 初始化 默認全部選中
                this.checkedCities = this.allElection;
                let checkedCount = this.checkedCities.length;
                this.checkAll = checkedCount === this.labels.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.labels.length;
                this.selectionFun(this.checkedCities);
            },
 
            allElectionFun() { // 全選數組
                this.allElection = [];
                for (var i = 0; i < this.labels.length; i++) {
                    this.allElection.push(this.labels[i].name)
                }
            },
 
            selectionFun(selectionArr) { // 獲取選中的對象
                this.selectionArr = [];
                for (var i = 0; i < this.labels.length; i++) {
                    for (var j = 0; j < selectionArr.length; j++) {
                        if (selectionArr[j] === this.labels[i].name) {
                            this.selectionArr.push(this.labels[i])
                        }
                    }
                }
            },
            handleCheckAllChange(val) { // 全選
                this.allElectionFun();
                this.checkedCities = val ? this.allElection : [];
                this.isIndeterminate = false;
                // console.log(this.checkedCities);
                this.selectionFun(this.checkedCities);
                console.log(this.selectionArr)
            },
            handleCheckedCitiesChange(value) { // 選中
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.labels.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.labels.length;
                this.selectionFun(value);
                console.log(this.selectionArr)
            }
        }
    }
</script>
 
<style scoped>
    .message-box {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, .33);
        z-index: 10;
    }
 
    .dialog-content {
        width: 500px;
        height: 340px;
        margin: auto;
        padding: 20px;
        background-color: white;
    }
 
    .dialog-body {
        width: 100%;
        height: 68%;
        margin: 10px;
        overflow: auto;
    }
 
    .text-but {
        text-align: center;
    }
 
    .dialog-content1 {
        display: inline-block;
        width: 100px;
        height: 40px;
        border-radius: 4px;
        background: #0071fe;
        font-size: 18px;
        color: #fff;
        margin: 16px 70px 20px;
    }
 
    .spanClo {
        width: 30px;
        height: 10px;
        display: inline-block;
        margin: 16px 0 0 6px;
    }
</style>
<style>
 
</style>