el-checkbox遍历的的时候如何使用

<template>
    <div class="checkBox">
        <template v-for="item in checkedCities">
            <el-checkbox :key="item.id" v-model="item.isCheck" @change="handleCheckAllChange(item)">{{item.title}}
            </el-checkbox>
            <div style="padding-left:25px">
                <el-checkbox v-for="child in item.children" :key="child.id" v-model="child.isCheck"
                    @change="handleCheckedCitiesChange(item)">{{child.title}}</el-checkbox>
            </div>
        </template>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checkedCities: [{
                    id: 1,
                    title: "水果",
                    isCheck: false,
                    children: [{
                            id: 2,
                            title: "香蕉",
                            isCheck: false,
                        },
                        {
                            id: 3,
                            title: "苹果",
                            isCheck: true,
                        },
                        {
                            id: 4,
                            title: "菠萝",
                            isCheck: false,
                        }
                    ]
                },{
                    id:5,
                    title:"饮料",
                    isCheck:false,
                    children:[
                        {
                            id:6,
                            title:"咖啡",
                            isCheck:false
                        },
                        {
                            id:7,
                            title:"汽水",
                            isCheck:true
                        }
                    ]
                }],
            };
        },
        methods: {
            handleCheckAllChange(node) {
                if (node.children && node.children instanceof Array && node.children.length > 0) {
                    node.children.forEach(item => {
                        item.isCheck = node.isCheck
                    })
                }
            },
            handleCheckedCitiesChange(parent) {
                parent.isCheck = parent.children.every(item=>item.isCheck)
            }
        }
    };
</script>
<style>
    .checkBox{
        text-align: left;
        padding-left: 90px;
        
    }
</style>

复制

以上是一个简单的案例，如果对你有用请给我点个赞吧 ^ _ ^