關(guān)于 vue tree 勾選全部的疑問

 引用父組件：
<vue-tree :data='routerList'></vue-tree>
子組件：
    <template>
    <ul class="vue-tree">
        <li :class="['vue-tree-li', item.type == 0 ? 'type0' :'type1']" v-for="(item, index) in data">
            <div :class="['children', !item.children ? 'forward' : '']">
                <div  :class="[item.children && item.children.length > 0 ? '' : 'forward']">
                    <span :class="[ 'arrow-right',item.show ? 'arrow-down' : '']" v-if="item.children && item.children.length > 0"></span>
                    <el-checkbox v-model="item.checked" @change="checkedBtn(item,index,data)"></el-checkbox>
                    <span @click="getTrees(item, index)" >{{item.routeName}}</span>
                </div>
            </div>
            <myTree :data='item.children' v-if='item.show'></myTree>
        </li>
    </ul>
</template>
<script>
    export default {
        name: 'myTree',
        props: ['data'],
        methods: {
            getTrees(item,index) {
                this.$set(this.data[index], 'show', this.data[index].show === undefined ? true : !this.data[index].show);
            },
            /*
             * 選中框
             */
            checkedBtn(item, index ,data){
                let itemChecked = item['checked'];
                if (item['children'] && item['children'].length){
                    for (let i in item['children']){
                        let checked = item['children'][i];
                        this.$set(this.data[index]['children'][i], 'checked', this.data[index]['children'][i]['checked'] === undefined ? true : !this.data[index]['children'][i]['checked']);
                    }
                } else {
                    if (this.data[index].checked === undefined){
                        this.$set(this.data[index], 'checked', this.data[index].checked = true);
                    } else {
                        this.$set(this.data[index], 'checked', this.data[index].checked ? true : false);
                    }
                }
            }
        }
    }
</script>

需要實現(xiàn)的效果是跟 http://element.eleme.io/#/zh-... 一樣的效果
我現(xiàn)在無法做到全選和全選中后，子集取消選中，父級也需要跟著取消選中。。。