elementui 侧边菜单跳转新窗口_动态加载router，用Vue+Element UI搭建后台管理系统界面...

最新推荐文章于 2024-08-11 17:33:21 发布

Tranyn.X

最新推荐文章于 2024-08-11 17:33:21 发布

阅读量3.4k

点赞数 1

文章标签： elementui 侧边菜单跳转新窗口

本文链接：https://blog.csdn.net/weixin_32242475/article/details/113709687

版权

本文介绍了如何使用Vue和Element UI组件库创建一个包含侧边菜单的后台管理系统界面，讲解了elementui菜单配置如default-openeds、default-active和index的用法，并展示了如何实现页面动态加载和新窗口跳转。通过实例代码和运行结果展示，帮助读者理解前后端分离的实践应用。

摘要由CSDN通过智能技术生成

Java大联盟

致力于最高效的Java学习

关注

今天教大家用 Vue + Element UI 搭建一个后台管理系统界面，首先讲一下需要用到的组件标签，重点是左侧菜单栏的创建，Element UI 左侧菜单的标签有： el-container ：构建整个页面框架。 el-aside ：构建左侧菜单。 el-menu ：左侧菜单内容，常用属性如下。

- :default-openeds：默认展开的菜单(针对父节点)，通过菜单的 index 值关联。
- :default-active：默认选中的菜单(针对叶子结点)，通过菜单的 index 值关联。

default-openeds=el-menu><script>  export default{
        data(){
                return {
                    num:'3-4-1',                items:['1','3']            }        }    }script>

上述代码表示打开 index 为 1 和 3 的父菜单，默认选中 index 为 3-4-1 的叶子结点。 el-submenu ：可展开的菜单，常用属性如下。

- index：菜单下标，文本类型，不能是数值类型。

template ：可展开的菜单名，每一个 el-submenu 都需要搭配一个 template，常用属性如下。

- slot="title" 设置样式。

i ：菜单图片，通过 class 设置样式，常用样式如下。 el-menu-item ：不可展开的菜单，叶子结点，常用属性如下。

- index：菜单下标。

我们用这些标签来完成一个页面，代码如下所示。

<template>    <el-container style="height: 800px; border: 1px solid #eee">        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">            <el-menu :default-openeds="openeds" :default-active=&