ele 多选框实现三级联动权限管理

<template>
    <el-form label-width="200px">
        <el-button @click="aa">点击我打印结果</el-button>
        <el-form-item v-for="v1 in list" :key="v1.id" style="border-top: 1px solid red;padding-left: 24px;">
            <el-checkbox v-model="v1.select" @change="v1Change(v1)">{{ v1.power_name }}</el-checkbox>
            <div v-for="v2 in v1.child" :key="v2.id" style="padding-left: 24px;">
                <el-checkbox v-model="v2.select" @change="v2Change(v1, v2)">{{ v2.power_name }}</el-checkbox>
                <el-checkbox-group v-model="v2.checked" style="padding-left: 24px;" @change="v3Change(v1, v2)">
                    <el-checkbox v-for="v3 in v2.child" :key="v3.id" :label="v3.id">{{v3.power_name}}</el-checkbox>
                </el-checkbox-group>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                top: [],
                list: []
            }
        },
        methods: {
            getList() {
                // 假设是后台获取的数据
                const data = [{
                        "id": "1",
                        "pid": null,
                        "power_name": "订单管理（目录）",
                        "power": "style/technology/save",
                        "child": [{
                                "id": "2",
                                "pid": "1",
                                "power_name": "销售订单列表（菜单）",
                                "power": null,
                                "child": [{
                                        "id": "3",
                                        "pid": "2",
                                        "power_name": "新建销售单（按钮）",
                                        "power": null
                                    },
                                    {
                                        "id": "4",
                                        "pid": "2",
                                        "power_name": "查看销售单详情（按钮）",
                                        "power": null
                                    },
                                    {
                                        "id": "14",
                                        "pid": "2",
                                        "power_name": "的人工艺大润发",
                                        "power": null
                                    },
                                    {
                                        "id": "17",
                                        "pid": "2",
                                        "power_name": "发鬼地方个",
                                        "power": null
                                    }
                                ]
                            },
                            {
                                "id": "5",
                                "pid": "1",
                                "power_name": "采购单列表（菜单）",
                                "power": null,
                                "child": [{
                                        "id": "6",
                                        "pid": "5",
                                        "power_name": "新建采购单（按钮）",
                                        "power": null
                                    },
                                    {
                                        "id": "7",
                                        "pid": "5",
                                        "power_name": " 查看采购单详情（按钮）",
                                        "power": null
                                    }
                                ]
                            },
                            {
                                "id": "13",
                                "pid": "1",
                                "power_name": "发货刚刚好",
                                "power": null
                            },
                            {
                                "id": "21",
                                "pid": "1",
                                "power_name": "的发货苟富贵",
                                "power": null
                            }
                        ]
                    },
                    {
                        "id": "8",
                        "pid": null,
                        "power_name": "物料管理（目录）",
                        "power": null,
                        "child": [{
                                "id": "9",
                                "pid": "8",
                                "power_name": "物料管理列表（菜单）",
                                "power": null,
                                "child": [{
                                    "id": "10",
                                    "pid": "9",
                                    "power_name": "新建物料（按钮）",
                                    "power": null
                                }]
                            },
                            {
                                "id": "11",
                                "pid": "8",
                                "power_name": "物料分类管理（菜单）",
                                "power": null,
                                "child": [{
                                        "id": "12",
                                        "pid": "11",
                                        "power_name": "新建分类（按钮）",
                                        "power": null
                                    },
                                    {
                                        "id": "22",
                                        "pid": "11",
                                        "power_name": "规范合格后",
                                        "power": null
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "id": "15",
                        "pid": null,
                        "power_name": "规范化和",
                        "power": null,
                        "child": [{
                            "id": "16",
                            "pid": "15",
                            "power_name": "发过火",
                            "power": null,
                            "child": [{
                                    "id": "18",
                                    "pid": "16",
                                    "power_name": "和国家科技",
                                    "power": null
                                },
                                {
                                    "id": "19",
                                    "pid": "16",
                                    "power_name": "热帖个人股",
                                    "power": null
                                },
                                {
                                    "id": "20",
                                    "pid": "16",
                                    "power_name": "热特让他",
                                    "power": null
                                }
                            ]
                        }]
                    }
                ]
                // let res = ["1", "2", "3", "4", "8", "11", "12"];
                let res = [];
                // data是所有列表  res是向后台存的结果
                data.forEach(v1 => {
                    v1.select = res.indexOf(v1.id) > -1;
                    if(!v1.child)v1.child = [];
                    v1.child.forEach(v2 => {
                        v2.select = res.indexOf(v2.id) > -1;
                        if(!v2.child)v2.child = [];
                        let ids = v2.child.map(v => v.id);
                        v2.checked = ids.filter(v => res.indexOf(v) > -1);
                    })
                })
                this.list = data;
            },
            // 向后台提交的数据
            aa() {
                let res = [];
                this.list.forEach(v1 => {
                    if (v1.select) {
                        res.push(v1.id)
                    }
                    v1.child.forEach(v2 => {
                        if (v2.select) {
                            res.push(v2.id, ...v2.checked);
                        }
                    })
                })
                console.log(res)
            },
            v3Change(v1, v2) {
                if (v2.checked.length) {
                    v2.select = true;
                    v1.select = true;
                } else {
                    v2.select = false;
                    v1.select = v1.child.some(v => v.select);
                }
            },
            v2Change(v1, v2) {
                if (v2.select) {
                    v2.checked = v2.child.map(v => v.id);
                } else {
                    v2.checked = [];
                }
                v1.select = v1.child.some(v => v.select);
            },
            v1Change(v1) {
                let bol = v1.select;
                v1.child.forEach(v2 => {
                    v2.select = bol;
                    v2.checked = bol ? v2.child.map(v => v.id) : [];
                })
            }
        },
        created() {
            this.getList()
        }
    }
</script>