vue 递归组件

Question

我有这样一个数组

let dataList = [
    {
        id: 148
        pid: 0
        name: "将军"
        checked: true
        child: [
            {
                id: 154
                pid: 148
                name: "师长"
                checked: true
                child: [
                    {id: 182, pid: 154,name: "营长1", checked: true, level: 2, has: false},
                    {id: 210, pid: 154,name: "营长2", checked: true, level: 2, has: false}
                ]
                level: 1
                has: false
            }
        ]
        level: 0
        has: false
    }
]

我现在想得到下面这种效果
当前目录下的子级都是选中的那么他自身也是打勾
同时也要判断其它目录是否都选中 如果没有
他的所有父级状态就是
如果都选中他的所有父级就是状态
chenkbox状态会改变

我用是vue的递归组件

tree.vue

<template>
        <span>
            <span>
                <el-checkbox :indeterminate="dataItem.has" v-model="dataItem.checked" @change="levelChange(dataItem)">
                    <em v-text="dataItem.name"></em> 
                </el-checkbox>
            </span>
            <div v-if="hasMenu"">
                <menu-tree v-for="(item, index) in dataItem.child" :data-item="item" :key="index"></menu-tree>
            </div>
        </span>
</template>

<script>
    export default {
        name: 'menuTree',
        props: {
            dataItem: Object,
            data: Object,
        },
        computed: {
            hasMenu: {
                get: function() {
                    return this.dataItem.child && this.dataItem.child.length > 0;
                }
            }
        },
        methods: {
            //第一级
            levelChange(item) {
                //如果是第一级
                if(item.level == 0) {
                    this.checkSelect(new Array(item), item.checked);
                } else if ( item.child && item.child.length){
                    item.checked = item.checked ? true : false;
                    item.has = item.child && item.child.length ? true : false;
                    this.checkSelect(new Array(item), item.checked);
                } else { //最后一级
                    
                }
            },
            //递归改变选中某个父级下面子级状态
            checkSelect(data, bool) {
                for (let item of data) {
                    item.checked = bool;
                    item.has = false;
                    if (item.child && item.child.length) {
                        this.checkSelect(item.child, bool);
                    }
                }
            },
        }
    }

</script>

parent.vue

<template>
<div class="around-box" v-for="(item,index) in dataList" :key="index">
    <menu-tree :data-item="item" :data="dataList"></menu-tree>
</div>
</template>

import MenuTree from './tree';
export default {
    name: "parent",
    components: {
        MenuTree
    },
    data() {
        return {
            dataList: [],
        };
    },
}

这里的levelChange方法里我根本不知道他的上级和顶级是什么
只知道当前某个层级列表
在递归组件里要怎么做才能找到他的所有父级以及可改变他的父级状态？

Answer 1

弄个虚拟ID
id按照父子关系拼接生成
根据当前id就能截取到父级