vue elementui 递归 sidebar可伸缩侧边栏
最近在学习vue 做了一个可伸缩的 侧边栏 记录下 在很多管理系统都用到 管理系统一般都长的差不多
首先是收起时候
展开时候
首先是新建一个Layout.vue
<template>
<div>
<el-radio-group v-model="isCollapse" style="margin-left: 320px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<Sidebar :menuList="menuList" :collapse="isCollapse"/>
</div>
</template>
<script>
import Sidebar from './components/side/SideBar.vue'
export default {
name:'Layout',
components:{
Sidebar
},
data(){
return{
isCollapse: false,
"menuList" : [
{
"path": "1", //菜单项所对应的路由路径
"title": "功能1", //菜单项名称
"children":[] //是否有子菜单,若没有,则为[]
},
{
"path": "2",
"title": "功能2",
"children":[]
},
{
"path": "3",
"title": "功能3",
"children": [
{
"path": "3-1",
"title": "功能3-1",
"children":[]
},
{
"path": "3-2",
"title": "功能3-2",
"children":[
{
"path":"3-2-1",
"title":"功能3-2-1",
"children":[]
}
]
},
{
"path": "3-3",
"title": "功能3-3",
"children":[]
},
]
},
{
"path":"4",
"title":"功能4",
"children":[
{
"path":"4-1",
"title":"功能4-1"
}
]
} ] }
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
} }
</script>
<style lang="stylus" scroped> </style>
SideBar.vue
<template>
<el-menu default-active="3-2-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="collapse">
<sidebar-item v-for="menu in menuList" :key="menu.path" :item="menu" :collapse="collapse"/>
</el-menu>
</template>
<script> import SidebarItem from './SidebarItem' export default {
name:'Sidebar',
components: { SidebarItem },
props:{
menuList: {
type: Array,
required: true
},
collapse:{
type:Boolean,
default:false
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style lang="stylus">
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
} </style>
SidebarItem.vue
<template> <div v-if="item.children">
<template v-if="item.children.length == 0">
<el-menu-item :index="item.path">
<i class="el-icon-document"></i>
<span slot="title">{{item.title}}</span>
</el-menu-item>
</template>
<el-submenu v-else :index="item.path"> <template slot="title">
<i class="el-icon-location"></i>
<span slot="title" v-show="!collapse">{{item.title}}</span>
</template> <template v-for="child in item.children">
<sidebar-item
v-if="child.children&&child.children.length>0"
:item="child"
:key="child.path" />
<el-menu-item v-else :key="child.path" :index="child.path">
<i class="el-icon-location"></i>
{{child.title}}
</el-menu-item>
</template> </el-submenu> </div> </template> <script> export default {
name: 'SidebarItem',
props: {
item: {
type: Object,
required: true
},
collapse:{
type:Boolean,
default:false
}
}
}
</script>
期中不知道为什么
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title" v-show="!collapse">{{item.title}}</span>
</template>
这里的titlle怎么都不能在收起的时候隐藏掉 我试验element官网给的例子怎么都可以,后来没办法 把collapse带到这个组件里 用 v-show设置下 哪位大神知道为啥也希望可以提示下
vue elementui 递归 sidebar可伸缩侧边栏的更多相关文章
- vue+elementui搭建后台管理界面(5递归生成侧栏路由)
有一个菜单树,顶层菜单下面有多个子菜单,子菜单下还有子菜单... 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 { path: '/', redi ...
- 递归函数 Vue ElementUI
对树形菜单的递归操作,首先应该对树形菜单数据进行整理,优化成自己需要的类型 比如Vue + ElementUI的动态侧边栏数据 export function routerRoleToPretty ( ...
- vue+element-ui实现无限级动态菜单树
使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并 ...
- Vue+ElementUI项目使用webpack输出MPA
目录 Vue+ElementUI项目使用webpack输出MPA 一. 需求分析 二. 原方案分析 三. 多页面改造3步走 四. 小结 Vue+ElementUI项目使用webpack输出MPA 示例 ...
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
[摘要] Vue+ElementUI多页面打包改造 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目 ...
- Vue+ElementUI的后台管理框架
新开发的一个后台管理系统.在框架上,领导要用AdminLTE这套模板.这个其实很简单,把该引入的样式和js文件引入就可以了.这里就不多赘述了.有兴趣的可以参考:https://www.jianshu. ...
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...
- Vue + Element-ui实现后台管理系统(1) --- 总述
总述 一.项目效果 整体效果 登陆页 后台首页 用户管理页 说明 这里所有的数据都不是直接通过后端获取的, 而是通过Mock这个工具来模拟后端返回的接口数据. 附上github地址: mall-ma ...
- Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现
项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...
随机推荐
- python中的文件操作小结1
#!/usr/local/bin/python3 # -*- coding:utf-8 -*- f=open("test_1",'r',encoding="utf-8&q ...
- linux 共享内存
共享内存是最高效的IPC机制,因为它不涉及进程之间的任何数据传输.这种高效带来的问题是,我们必须用其他手段来同步进程对共享内存的访问,否则会产生竞态条件.所以,共享内存通常和其他进程间通信方式一起使用 ...
- 009---Django的模型层(1)
ORM 全称:对象--关系--映射 数据表----类 数据行----对象 字 段----属性优势:专注于后端逻辑,不用写复杂的sql语句劣势:会忘掉sql,牺牲了效率 Django连接mysql数据库 ...
- 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题
问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...
- 9 10mins的投票功能
1.投票的原理 2.投票的数据结构设计 (1)准备工作 导入detail页面 配置静态文件 <link rel="stylesheet" href="../stat ...
- JavaScript 仿ios滑动选择器
从git上找了一个,不过不是我想要的,更改了许多.到了我想要的效果: roller_selector_0_9.js 首先上js: "use strict"; /* * Author ...
- 阿里巴巴Java开发规约Eclipse插件安装及使用
技术交流群:233513714 插件安装 环境:JDK1.8,Eclipse4+.有同学遇到过这样的情况,安装插件重启后,发现没有对应的菜单项,从日志上也看不到相关的异常信息,最后把JDK从1.6升级 ...
- (B)springboot配置开发和测试环境并添加启动路径
嗯,开发和测试环境要分离,这是一般共识(虽然我工作过的公司都没有这种分离),spring boot也可以按照配置文件的读取来做到这一点. 上图有三个application开头的配置文件,要达到能够读取 ...
- 【Regularization】林轩田机器学习基石
正则化的提出,是因为要解决overfitting的问题. 以Linear Regression为例:低次多项式拟合的效果可能会好于高次多项式拟合的效果. 这里回顾上上节nonlinear transf ...
- mac虚拟机上(centos系统)设置联网第二种方式
这种方式简单,不容易出错,用的桥接的方式. 这样的安装的centos会得到ip地址 然后编辑一下网卡配置,使其变为静态得ip 输入命令 # vi /etc/sysconfig/network-scri ...