场景1

场景 ：使用Element-ui的树形组件，当选中的节点状态改变的时候使用@check-change函数与后台数据库进行交互

产生的问题1

当我选中某个父级节点，如果有多个子集节点，就会触发多次@check-change函数

分析

父节点有多个子集，当父节点选中状态发生改变，子节点的状态紧跟着发生改变，所以会产生多次调用

由官方文档可知，我们可以修改为@check函数，这样只有在复选框被点击时才会触发事件

解决

把 check-change 事件改为 check 事件，只有当点击修改状态的时候才会触发。

参考回答地址

Bug2:后端传过来父级菜单id，所有的子集也会被勾选

场景

项目需要做权限路由，因此如果选择一个子级菜单，同样需要在后端将其父级菜单也传到权限列表，但在树形结构的显示上就会出现问题。element-ui只要传了父级id，所有的子集都会被选上

解决

1. 在后端写上一个返回全部id的接口

    @GetMapping("/ids")
    public Result findAllIds(){
        return Result.success(menuService.list().stream().map(menu -> menu.getId()));
    }

2. 查看官方文档，使用setChecked方法
   

          handleEdit(row){
                this.UserId=row.id;
                this.roleFlag = row.flag;
                console.log("have show")
                //添加权限（树形结构）
                //拿到菜单列表
                this.request.get("/menu/menuList",{
                }).then(res => {
                    this.MnueData=res.data
                })
                //拿到当前角色的权限菜单
                this.request.get("/role/roleMenu",{
                    params: {
                        id:this.UserId
                    }
                }).then(res => {
                    this.hasChecked=res
                })
                //拿到所有的菜单id并和权限菜单进行比较,没有就不显示
                this.request.get("/menu/ids").then(res =>{
                    this.distributionMnue=true
                    const ids = res.data
                    ids.forEach(id =>{
                        //不包括id
                        if(!this.hasChecked.includes(id)){
                            console.log(id)
                            //使用setChecked方法需要设置  node-key="id"  设置为false即为不渲染
                            this.$refs.tree.setChecked(id,false);
                        }
                    })

                })
            },

注意点

一定要先写 this.distributionMnue=true 先将dom渲染出来， 再设置目前勾选的节点！！！（未来元素问题）

参考回答