树形组件使用 vue-jstree 文档中心 百度网盘

github:https://github.com/zdy1988/vue-jstree

示例：https://zdy1988.github.io/vue-jstree/

左侧是树形菜单

右侧是百度网盘的样式

基本用法 示例网站已经清楚了

关键解决 当我点击右侧文件夹  触发左侧的菜单切换和展开的问题

 

      
       // 右侧内容区域文件夹点击
        async folderClick(id) {
            // 设置选中 和 展开
            this.getMykey(this.treeData, id, 'opened', true);
            this.getMykey(this.treeData, id, 'selected', true);
        },
       /**
         * 遍历出当前应该选中的目录
         * @param obj 对象
         * @param id  点击的id
         * @param attr 修改的属性值
         * @param value 修改成value
         */
        getMykey(obj, id, attr, value) {
            obj.forEach((e) => {
                if (e.id === id) {
                    if (attr === 'selected' || attr === 'opened') {
                        this.$set(e, attr, value);
                    } else if (attr === 'children') {
                        e.addChild(value);
                    }
                } else if (e.children !== null && e.children.length > 0) {
                    this.getMykey(e.children, id, attr, value);
                }

            });
        },