我一人全干！之二，vue3后台管理系统树形目录的实现。

最新推荐文章于 2024-06-13 10:02:41 发布
最新推荐文章于 2024-06-13 10:02:41 发布
阅读量383 收藏 2
点赞数 2
分类专栏： 前端 vue 毒蘑菇后台管理 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjlhanhan/article/details/134835633
版权

一个完整的后台管理系统需要一个树形结构的目录，方便用户切换页面。

毒蘑菇后台管理
因为使用的是element-plus的ui库，所以首选el-menu组件，点击查看文档。
因为此组件不是树形结构的，所以需要封装成系统需要的树形结构组件。可以使用vue的递归组件。
menu.vue代码如下

<template>
    <div class="menu-container">
        <el-scrollbar 
            height="100%">
            <el-menu 
                ref="ElMenuRef"
                :collapse="false"
                :default-active="route.path"
                :router="false">
                <MenuItem
                    v-for="item,index in dataContainer.dataList"
                    :key="item.path"
                    :dataInfo="item"></MenuItem>
            </el-menu>
        </el-scrollbar>
    </div>
</template>
<script>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    onMounted,
    watch,
    toRef,
    onUnmounted,
} from 'vue';
import SvgIcon from "@/components/svgIcon/index.vue";
import { useRouter,useRoute } from "vue-router";
import MenuItem from "./MenuItem.vue";

export default {
    name: 'Menu',
    components: {
        SvgIcon,
        MenuItem,
    },
    props:{
        /** 所显示的数据列表 */
        dataList:{
            type:Array,
            default:()=>{
                return [];
            },
        },
    },
    setup(props) {
        const router = useRouter();
        const route = useRoute();
        const ElMenuRef = ref(null);
        const dataContainer = reactive({
            dataList:toRef(props,'dataList'),
        });
        /** 
         * 当页面加载后设置设置当前打开的父节点，因为如果父节点可点击的话不会自动打开
         * */
        onMounted(()=>{
            if(!ElMenuRef.value) return;
            let el = ElMenuRef.value.$el;
            let hasActiveSubEl = el.querySelector('.el-sub-menu .is-sub-defin-active');
            if(!hasActiveSubEl) return;
            ElMenuRef.value.open(route.path);
        });
        return {
            dataContainer,
            route,
            ElMenuRef,
        };
    },
};
</script>
<style scoped lang="scss">
.menu-container {
    height: 100%;
    width: 100%;
    /** 基础目录配置 */
    --local-active-text-color:#ffffff;
    --local-active-bg-color:#5240ff96;
    --local-active-sub-bg-color:#3634ac57;
    --local-hover-color:#3634ac57;
    --local-font-size:15px;
    --local-text-color:#b6cce2;
    --local-box-shadow: 0 1px 4px #001247;
    --local-border-radius:8px;
    :deep(.el-menu){
        border:none !important;
        --el-menu-active-color:var(--local-active-text-color) !important;
        --el-menu-item-font-size:var(--local-font-size) !important;
        --el-menu-text-color:var(--local-text-color) !important;
        --el-menu-hover-bg-color:var(--local-hover-color) !important;
        --active-item-bg-color:var(--local-active-bg-color) !important;
        --el-menu-bg-color:transparent !important;
        --el-menu-base-level-padding:15px !important;
        --el-menu-level-padding:20px !important;
        --el-menu-icon-width:calc(15px + 0) !important; 
        --el-menu-item-height:55px !important;
        --el-menu-sub-item-height:55px !important;
        --active-sub-bg-color:transparent !important;
        padding: 10px;
        box-sizing: border-box;
        .el-sub-menu__icon-arrow{
            margin-top: 0 !important;
            top:initial !important;
        }
        .el-menu{
            padding: 0;
        }
        .el-sub-menu{
            >.el-sub-menu__title{
                border-radius: var(--local-border-radius);
            }
            &.is-active{
                background-color: var(--active-sub-bg-color);
                >.el-sub-menu__title{
                    background-color: var(--local-active-sub-bg-color);
                }
            }
            .el-sub-menu__icon-arrow{
                font-size: 17px !important;
            }
            &.is-sub-defin-active{
                >.el-sub-menu__title{
                    background-color: var(--active-item-bg-color);
                    // font-weight: bold;
                    color: var(--el-menu-active-color);
                    box-shadow: var(--local-box-shadow);
                }
            }
            /** 表示有已经活动的sub目录 */
            &:has(.is-sub-defin-active){
                background-color: var(--active-sub-bg-color);
                >.el-sub-menu__title{
                    background-color: var(--local-active-sub-bg-color);
                }
            }
        }
        .el-menu-item{
            border-radius: var(--local-border-radius);
            &.is-active{
                background-color: var(--active-item-bg-color);
                // font-weight: bold;
                box-shadow: var(--local-box-shadow);
            }
        }
    }
    :deep(.el-scrollbar){
        .el-scrollbar__bar{
            .el-scrollbar__thumb{
                background-color: rgba(194, 194, 194, 0.51) !important;
            }
        }
    }
}
</style>

其中子组件MenuItem.vue代码如下

<template>
    <div class="menu-item-container">
        <!-- 没有子目录的 -->
        <el-menu-item
            v-if="!dataContainer.dataInfo.childs || dataContainer.dataInfo.childs.length==0"
            :index="dataContainer.dataInfo.path"
            :class="{
                'is-active':dataContainer.dataInfo.path==route.path,
            }"
            @click="handleClick(dataContainer.dataInfo)">
            <div class="item-target">
                <SvgIcon
                    v-if="dataContainer.dataInfo.iconName"
                    :style="'width: 17px;min-width:17px;height: 17px;'"
                    :name="dataContainer.dataInfo.iconName"></SvgIcon>
                {{dataContainer.dataInfo.title}}
                <div
                    v-if="dataContainer.dataInfo.content"
                    class="content">
                    {{dataContainer.dataInfo.content}}
                </div>
                <div
                    v-if="dataContainer.dataInfo.number"
                    class="sign">
                    {{dataContainer.dataInfo.number}}
                </div>
            </div>
        </el-menu-item>
        <!-- 有子目录且父节点可点击 -->
        <el-sub-menu 
            v-else-if="dataContainer.dataInfo.path"
            :class="{
                'is-sub-defin-active':route.path==dataContainer.dataInfo.path,
            }"
            :index="dataContainer.dataInfo.path">
            <template #title>
                <div 
                    class="item-target"
                    @click.stop="handleClick(dataContainer.dataInfo)">
                    <SvgIcon
                        v-if="dataContainer.dataInfo.iconName"
                        :style="'width: 17px;min-width:17px;height: 17px;'"
                        :name="dataContainer.dataInfo.iconName"></SvgIcon>
                    {{dataContainer.dataInfo.title}}
                    <div
                        v-if="dataContainer.dataInfo.content"
                        class="content">
                        {{dataContainer.dataInfo.content}}
                    </div>
                    <div
                        v-if="dataContainer.dataInfo.number"
                        class="sign">
                        {{dataContainer.dataInfo.number}}
                    </div>
                </div>
            </template>
            <MenuItem
                v-for="item,index in dataContainer.dataInfo.childs"
                :key="item.path"
                :dataInfo="item"></MenuItem>
        </el-sub-menu>
        <!-- 有子目录且父节点不可点击 -->
        <el-sub-menu 
            v-else
            :index="dataContainer.dataInfo.sign">
            <template #title>
                <div class="item-target">
                    <SvgIcon
                        v-if="dataContainer.dataInfo.iconName"
                        :style="'width: 17px;min-width:17px;height: 17px;'"
                        :name="dataContainer.dataInfo.iconName"></SvgIcon>
                    {{dataContainer.dataInfo.title}}
                    <div
                        v-if="dataContainer.dataInfo.content"
                        class="content">
                        {{dataContainer.dataInfo.content}}
                    </div>
                    <div
                        v-if="dataContainer.dataInfo.number"
                        class="sign">
                        {{dataContainer.dataInfo.number}}
                    </div>
                </div>
            </template>
            <MenuItem
                v-for="item,index in dataContainer.dataInfo.childs"
                :key="item.path"
                :dataInfo="item"></MenuItem>
        </el-sub-menu>
    </div>
</template>
<script>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    onMounted,
    watch,
    toRef,
    onUnmounted,
} from 'vue';
import SvgIcon from "@/components/svgIcon/index.vue";
import { useRouter,useRoute } from "vue-router";

export default {
    name: 'MenuItem',
    components: {
        SvgIcon,
    },
    props:{
        /** 所显示的数据列表 */
        dataInfo:{
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    setup(props) {
        const router = useRouter();
        const route = useRoute();
        const dataContainer = reactive({
            dataInfo:toRef(props,'dataInfo'),
        });
        /** 跳转相应链接 */
        function handleClick(params){
            if(!params.path) return;
            /** 如果是一个链接的话直接跳转 */
            if(params.isLink){
                window.open(params.path);
            }else{
                router.push(params.path);
            }
        }
        return {
            dataContainer,
            handleClick,
            route,
        };
    },
};
</script>
<style scoped lang="scss">
.menu-item-container {
    height: fit-content;
    width: 100%;
    :deep(.item-target){
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        >*{
            margin-right: 10px;
        }
        >.sign{
            right: 0;
            position: absolute;
            width: fit-content;
            background-color: #ffe4e4;
            color: #f56c6c;
            border-radius: 999px;
            padding: 5px 10px;
            box-sizing: border-box;
            line-height: 1;
            font-size: 12px;
            margin: 0;
            font-weight: bold;
        }
        >.content{
            font-size: 12px;
            margin-left: 5px;
            opacity: 0.8;
            font-weight: 400 !important;
        }
    }
}
</style>

这样就可以实现一个树形结构的系统目录了。
DEMO，源码

23朵毒蘑菇
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于Vue3+Element编写的一款后台管理系统（兼容移动端）
02-16
vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发。
【前端】vue3树形组件使用
weixin_43366051的博客
04-22 1745
随着开发语言及人工智能工具的普及，使得越来越多的人学习使用vue前端工具，本文主要是介绍vue3中树形组件的使用。树形组件是一种常见的用户界面元素，用于以层次结构的形式显示数据。它通常用于展示具有父子关系的数据，例如文件系统结构、组织架构、类别和子类别等。树形组件通常由树节点（节点）组成，每个节点可以包含子节点，形成树状结构。用户可以展开或折叠节点，以便查看或隐藏其子节点。用户可以选择一个或多个节点，以执行特定操作，例如删除、移动或编辑。允许用户通过拖放节点来重新组织树的结构。
使用vue3+element plus实现文件目录树,可拖拽，新增，修改和删除节点
最新发布
c_nwe_one的博客
06-13 225
使用vue3+element plus实现文件目录树，可拖拽，新增，修改和删除结点
【CSS】奇怪笔记
栀妹儿的炼丹炉
09-17 553
自定义class变量名、匹配同类型中的第n个同级兄弟元素的背景色、页面高度获取
从0开始搭建后台管理系统-03（自定义主题）
grx1125的博客
08-22 475
在官网、后台管理、文档页等长时间浏览的页面，都会内置多套样式。可以缓解视觉疲劳、审美疲劳。主题最基本就是明亮和黑暗，一个日间使用一个夜间使用，当然也可以写几套活力一点的颜色。本篇文章介绍如何在vue中使用自定义主题。
element-ui 导航栏的样式修改
weixin_44479794的博客
05-16 3863
::v-deep .el-menu-item { background-color: #EBEEF5; height: 20px; line-height: 20px; } .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title { height: 20px; line-height: 20px; } .el-submenu /deep/ .el-subme
vue vue-element-ui组件 el-menu高度设置
然而老干妈早就看穿了一切
07-19 8006
vue-element-ui组件el-menu菜单高度设置。
修改el-menu主菜单和子菜单悬浮的背景色
热门推荐
lannieZ的博客
04-07 1万+
/deep/.el-menu .el-menu-item:hover{ outline: 0 !important; color: #2E95FB !important; background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important; } /deep/.el-menu .el-menu-item.is-active { color: #2E95FB !important; backgro
基于vue3+elementPlus的后台管理系统模板实现
03-03
基于vue3+elementPlus的后台管理系统模板实现
基于Vue3+Element Plus后台管理系统模版源码.zip
10-26
基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element ...
Vue后台管理系统实现权限控制
05-17
基于Vue和element-ui组件库搭建的一个后台管理系统。主要讲的是关于后台管理系统权限控制问题，包括：菜单控制、界面控制、按钮控制、请求和响应控制。
基于vue3+elementPlus的后台管理系统模板
02-18
基于vue3+elementPlus的后台管理系统模板
Vue自定义文章目录
gcf10080353的博客
05-11 1239
1、btoa加密后的字符串后两位是‘==’，也会包锚点不合法错误，临时解决：只提取前20位。直接生成三个随机数转成36进制，分别截取后8位，再拼接。：标题字符串处理后再生成锚点id，保证锚点正确。导致控制台报错，但是能work，正确跳转。这里将这部分定义为一个组件，方便递归调用。2、只提取前20位的话有可能存在相同锚点。menuTree_json存放结构数据。当目录条目过多时，需要进行搜索过滤。目录树结构，可展开收缩。
Vue 3第二章：Vite文件目录结构及SFC语法
to_the_Future的博客
02-24 4293
Vue3 支持使用单文件组件（SFC）来组织代码。SFC 将一个组件的模板、样式和逻辑封装在一个文件中，使得组件的代码更加清晰和易于维护。以下是一个简单的 SFC 的例子：
Vue3 目录结构
QYgujingjing的专栏
02-15 740
Vue3 目录结构
更改elementUI组价样式
qq_41011723的博客
02-23 1961
在一次做导航栏的时候需要用到菜单组件，觉得el-menu-item的宽度太大了，封装的是200px。 注意这里的el-menu-item是下拉框中的item，而不是标题！不是很想放图片，就用一级路径描述来表示导航栏的一项，用二级路径表示鼠标悬浮才出现的下拉项（表述可能不恰当，意会即可） 在当前组件的’<style_>'添加 .el-menu--horizontal { heig...
更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线
Y2960018173的博客
12-05 1683
【代码】更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线。
完美解决menu划入样式
2301_78698859的博客
06-16 227
outline: 0!important;important;important;important;color: red;
给我写一个vue3后台管理系统的项目代码
05-27
很抱歉，作为一个语言模型AI，我无法直接给出完整的项目代码。但是，我可以给您提供一个简单的vue3后台管理系统的示例代码，供您参考。 ``` <template> <div> <h1>Vue3 Admin Dashboard</h1> <ul> <li v-for="item in menuItems" :key="item.id"> <router-link :to="item.path">{{ item.name }}</router-link> </li> </ul> <router-view></router-view> </div> </template> <script> import { defineComponent } from 'vue'; import Home from './views/Home.vue'; import Users from './views/Users.vue'; import Products from './views/Products.vue'; export default defineComponent({ name: 'App', components: { Home, Users, Products }, data() { return { menuItems: [ { id: 1, name: 'Home', path: '/' }, { id: 2, name: 'Users', path: '/users' }, { id: 3, name: 'Products', path: '/products' } ] }; } }); </script> ``` 这是一个简单的vue3后台管理系统的示例，包括了一个菜单列表和三个路由视图。您可以根据自己的需求，进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值