vue element menu侧边导航栏

港控/mmm° 2022-10-29 14:25 133阅读 0赞
  1. <template>
  2. <!--el-menu里的颜色是通过element定义的属性来设置的,css样式中没有相关样式-->
  3. <!--unique-opened 只摊开一个el-submenu,默认是弹开所有.这个属性依赖于submenu的index值,如果index值相同的会同时展开-->
  4. <!--router用来开启el-menu-item的路由模型,默认连接是index的值-->
  5. <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b" unique-opened router>
  6. <el-submenu index="1"> <!--index属性用于区别不同的submenu-->
  7. <template slot="title"><!--slot属性表明该template是submenu的标题-->
  8. <i class="el-icon-location"></i> <!--添加左侧的小图标-->
  9. <span>导航一</span><!--添加标题名称-->
  10. </template>
  11. <el-menu-item index="1-1">选项1</el-menu-item><!--添加二级选项-->
  12. <el-menu-item index="1-2">选项2</el-menu-item><!--添加二级选项-->
  13. </el-submenu>
  14. <el-submenu index="2">
  15. <template slot="title"><!--slot属性表明该template是submenu的标题-->
  16. <i class="el-icon-location"></i> <!--添加左侧的小图标-->
  17. <span>导航一</span><!--添加标题名称-->
  18. </template>
  19. <el-menu-item index="2-1">选项1</el-menu-item><!--添加二级选项-->
  20. <el-menu-item index="2-2">选项2</el-menu-item><!--添加二级选项-->
  21. </el-submenu>
  22. </el-menu>
  23. </template>
  24. <script>
  25. export default {
  26. name: 'Home'
  27. }
  28. </script>
  29. <style scoped>
  30. </style>

参考:
https://element.eleme.io/\#/zh-CN/component/menu\#ce-lan

发表评论

表情:
评论列表 (有 0 条评论,133人围观)

还没有评论,来说两句吧...

相关阅读