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

Embrace924

于 2020-08-28 16:01:42 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue tree 前端文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Embrace924/article/details/108074137

前端同时被 3 个专栏收录

48 篇文章

订阅专栏

vue

26 篇文章

订阅专栏

tree

2 篇文章

订阅专栏

本文介绍了一个Vue组件vue-jstree的使用案例，着重解决了右侧文件夹点击时，左侧树形菜单同步切换和展开的问题。通过getMykey方法实现对树形结构的选择与展开状态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
                }

            });
        },