vue目录树组件(树状结构列表)

一般数据类展示内容，大多采用树状结构展示内容。类似效果如下：

关注微信公众号，查看效果

​

左侧是导航分类，可以进行新建，对单项导航分享和删除。单击导航，在右侧查询出当前导航下所有目录结构，可以新建目录。新增类型分为三种，目录可以无限嵌套，当然也可以设置层级。

页面整体布局

页面分为左右两个部分。左侧列表，通过路由跳转显示右侧内容。左侧列表分为上下两块，顶部是添加按钮，下面是导航列表。

less样式。

import "../../theme/variables.less";


.main {
    position: relative;
    height: 100%;
    overflow: hidden;
    .content {
        border: 1px solid #dcdcdc;
        position: relative;
        height: 100%;
        background: #f1f2f7;
        display: flex;
        border-radius: @borderRadius;
        .left {
            width: 240px;
            background: #fff;
            border-right: 1px solid rgba(220, 220, 220, 1);
            padding: 15px 10px;
            display: flex;
            flex-direction: column;
            overflow: auto;
            .header {
                width: 100%;
                margin-bottom: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                .btn {
                    width: 136px;
                    margin: 0 6px;
                    :global {
                        .icon {
                            margin-right: 14px;
                        }
                        .customIcon {
                            display: inline-block;
                            transform: rotate(45deg);
                        }
                    }
                }
            }
            .treeLayout {
                flex: 1;
                .item {
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    margin-bottom: 11px;
                    position: relative;
                    .link {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                        padding-left: 21px;
                        cursor: pointer;
                        .catalogIcon {
                            font-size: 12px;
                        }
                        .text {
                            display: inline-block;
                            flex: 1;
                            margin-left: 12px;
                        }
                        .opBtn {
                            width: 46px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        }
                        .operateIcon {
                            display: none;
                        }
                        &:hover {
                            color: #00a4ff;
                            .opBtn {
                                color: rgba(51, 51, 51, 1);
                            }
                            .operateIcon {
                                display: block;
                            }
                        }
                    }
                    .iconBtns {
                        position: absolute;
                        top: 28px;
                        right: 24px;
                        width: 112px;
                        background: rgba(255, 255, 255, 1);
                        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.13);
                        border-radius: 4px;
                        z-index: 10;
                        .icon {
                            width: 100%;
                            height: 40px;
                            border-radius: 2px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: rgba(51, 51, 51, 1);
                            cursor: pointer;
                            .iconName {
                                margin-left: 18px;
                            }
                            &:hover {
                                background: #e7e8e9;
                            }
                        }
                    }
                }
                .itemActive {
                    .link {
                        color: #00a4ff;
                        .opBtn {
                            color: rgba(51, 51, 51, 1);
                        }
                        .operateIcon {
                            display: block;
                        }
                    }
                }
            }
        }
        .right {
            flex: 1;
            width: 100%;
            overflow: hidden;
        }
    }
}

这里的导航列表，新增导航，和删除都是调用相关接口。

目录树组件

页面右侧就是树状结构列表，通过路由跳转携带catalogId参数，接口查询出列表数据，后端返回的数据就是有层级的树状结构。

我认为的写一个组件，单指这里的目录树组件，组件中只需要构造出页面布局，任何的交互逻辑都不涉及，只将相关事件抛出即可。这就需要先明确好数据结构，来写样式布局了。

数据结构，有id，name，父级id，子节点数组，类型catalogType：1是目录，2是场景，3是外链场景 ... 如下：

​

树状结构会涉及到递归，这里为了处理方便，组件中分为两层。组件目录结构如下：

​

index就是对外暴露的窗口，主要目录树的布局样式是在DomNode中。先明确一下布局，目录树中单个一行，需要一个展开收起的图标，当前行类型的图标，这里业务上分三种类型，就需要以此判断显示不同图标。每项最后还会有四个操作按钮。

​

这里把事件简化了，只分了两个事件，一个是展开收起，一个是一系列编辑操作，传个type参数作为区分。

tabNode(node: ITree) {
    this.$emit("tabNode", node);
},


// 操作
doNode(node: ITree, type: string, index: number) {
    this.$emit("doNode", node, type, index);
},

index文件中引用DomNode，相关的接收的参数和抛出去的事件，和DomNode一致。

// index布局
<div class="treeLayout">
    <DomNode
        v-for="(item, index) in trees"
        :key="index"
        :node="item"
        @tabNode="tabNode"
        @doNode="doNode"
        :index="index"
    ></DomNode>
</div>


// 接收的参数
props: {
    trees: {
        type: Array as () => ITree[],
        default: [],
    },
    activeId: {
        type: String,
        default: "",
    },
},

页面右侧实现

引用catalogTree组件。

<catalog-tree
  :trees="treeList"
  @tabNode="tabNode"
  @doNode="doNode"
></catalog-tree>

前文已经提过，目录数据是后端返回的，那么treeList就是后端返回值res.data。但操作tabNode和doNode这两个方法，需要将treeList数组转换成map对象。

因为需要自定义添加一些字段，这些字段只作为前端交互操作逻辑使用，所以后端返回值中不会携带。

需要给每一项数据添加isOpen字段，用来判断展开收起状态。level字段，用来实现上移下移操作。

先来构造这个catalogMap，定义个方法setCatalogMap，需要的参数有存放结果的treeMap，原数据treeList数组。

setCatalogMap，很简单的一个递归。

​

拿到map对象，就可以实现tabNode和doNode这两个方法。

// 切换状态
tabNode(node: ITree) {
    if (node.isOpen) {
        this.treeMap[node.catalogId].isOpen = false;
    } else {
        this.treeMap[node.catalogId].isOpen = true;
    }
},


// 编辑等一系列操作,按照类型区分
doNode(node: ITree, type: string, index: number) {
    switch (type) {
        case "up":
            // 上移
            this.doUp(node, index);
            break;
        case "down":
            // 下移
            this.doDown(node, index);
            break;
        case "edit":
            // 编辑
            this.doEdit(node.catalogId);
            break;
        case "delete":
            // 删除
            this.doDelete(node);
            break;
    }
},

有认真看的话，会发现，并没有在哪里定义isOpen属性，怎么就在tabNode方法中使用了。

因为我还没有写。

拿到map对象，循环做个判断，用来保持isOpen状态。

Object.keys(treeMap).forEach((key) => {
    const item = treeMap[key];
    if (this.treeMap[key]) {
        item.isOpen = this.treeMap[key].isOpen;
    } else {
        item.isOpen = true;
    }
});

doNode中的四个方法，编辑和删除就是调个接口，主要是上移下移操作，前端实现数据的排序，最后将最新的数据返回给后端保存，doSaveSort方法调接口保存。

上代码，好好琢磨琢磨。

doUp(node: ICatalogModel, index: number) {
    if (index === 0) {
        return;
    }
    const parentId: string = node.catalogParent as string;
    const parentItem: ICatalogModel = this.treeMap[parentId];


    let dataList: ICatalogModel[] = [];
    // 如果为空则是顶级
    if (parentItem) {
        if (parentItem.catalogTreeVoList) {
            dataList = parentItem.catalogTreeVoList;
        }
    } else {
        dataList = this.treeList;
    }
    const item = dataList[index];
    dataList.splice(index, 1);
    dataList.splice(index - 1, 0, item);
    this.doSaveSort(dataList);
},


doDown(node: ICatalogModel, index: number) {
    const parentId: string = node.catalogParent as string;
    const parentItem: ICatalogModel = this.treeMap[parentId];
    // 如果为空则是顶级
    let dataList: ICatalogModel[] = [];
    if (parentItem) {
        if (parentItem.catalogTreeVoList) {
            // 最后一个不能下移
            if (parentItem.catalogTreeVoList.length === (index + 1)) {
                return;
            } else {
                dataList = parentItem.catalogTreeVoList;
            }
        }
    } else {
        // 一级最后一个不能下移
        if ( this.treeList.length === (index + 1)) {
            return;
        }
        dataList = this.treeList;
    }
    const item = dataList[index];
    dataList.splice(index, 1);
    dataList.splice(index + 1, 0, item);
    this.doSaveSort(dataList);
},

总结

树状结构列表，首先需要明确数据结构，必备的字段id，name，父级id，children数组，根据数据结构，使用递归构建布局。