vue element menu侧边导航栏数据渲染

<template><!--el-menu里的颜色是通过element定义的属性来设置的,css样式中没有相关样式--><!--unique-opened 只摊开一个el-submenu,默认是弹开所有.这个属性依赖于submenu的index值,如果index值相同的会同时展开--><!--router用来开启el-menu-item的路由模型,默认连接是index的值--><el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b" unique-opened router><!--key是v-for循环需要添加的--><el-submenu :index="sm.id" v-for="sm in menuList" :key="sm.id"> <!--index属性用于区别不同的submenu--><template slot="title"><!--slot属性表明该template是submenu的标题--><i class="el-icon-location"></i> <!--添加左侧的小图标--><span>{{ sm.name }}</span><!--添加标题名称--></template><el-menu-item :index="mi.path" v-for="mi in sm.children" :key="mi.id">{{mi.name}}</el-menu-item><!--添加二级选项--></el-submenu>
</el-menu>
</template><script>
export default {name: 'Home',data () {return {menuList: [{ id: '1', name: '导航1', children: [{ id: '1-1', name: '选项1', path: '/path1-1' }, { id: '1-2', name: '选项2', path: '/path1-2' }] },{ id: '2', name: '导航2', children: [{ id: '2-1', name: '选项1', path: '/path1-1' }, { id: '2-2', name: '选项2', path: '/path1-2' }] }]}}
}
</script>
<style scoped></style>

vue element menu侧边导航栏数据渲染相关推荐

vue element menu侧边导航栏
<template><!--unique-opened 只摊开一个el ...
vue实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换，封装直接用
<template><div><el-dialogsize="big"title="名字":vi ...
Vue实现侧边导航栏于Tab页关联
技术栈侧边栏用 Antd tab使用element 效果 <template><div class="main-card"><el-row>& ...
vue + elementui 实现动态侧边导航栏
vue + elementui 实现动态侧边导航栏引言 router 文件夹创建 layout 文件夹 components 创建 SubMenu 文件夹封装动态侧边栏 vuex 中根据权限动态获 ...
简单记录—vue 用js方法实现侧边导航栏联动选择
侧边导航栏有两个功能要实现: 1.选择任意一条页面滚动到指定目录位置 2.页面内容滚动侧边栏跟随一起滚动页面结构部分,根据数据循环写一个ul > li,生成侧边目录 <ul>< ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
html中关于侧边导航栏和导航栏的编写
侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,bac ...
js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
注:要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6 ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...

vue element menu侧边导航栏数据渲染

vue element menu侧边导航栏数据渲染相关推荐

最新文章

热门文章

vue element menu侧边导航栏 数据渲染

vue element menu侧边导航栏 数据渲染相关推荐

最新文章

热门文章

vue element menu侧边导航栏数据渲染

vue element menu侧边导航栏数据渲染相关推荐