vue侧边栏菜单一二级模板

最新推荐文章于 2024-08-08 08:48:09 发布

原创最新推荐文章于 2024-08-08 08:48:09 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍 Element UI 中侧边栏菜单的配置方法，包括如何设置菜单样式、创建一级及二级菜单项，并展示了具体的 HTML 结构示例。

<!--侧边栏-->
<el-aside width="200px">
  <!--菜单-->
  <el-menu background-color="#333744" text-color="#fff"
  active-text-color="#ffd04b">
  <!--一级菜单-->
  <el-submenu index="1">
    <!--一级菜单的模板区域-->
    <template slot="title">
      <!--图标-->
      <i class="el-icon-location"></i>
      <!-- 文本-->
      <span>导航一</span>
    </template>
    <!--二级菜单-->
    <el-menu-item index="1-1">
      <!--二级菜单的模板区域-->
      <template slot="title">
        <!--图标-->
        <i class="el-icon-location"></i>
        <!--文本-->
        <span>导航一</span>
      </template>
    </el-menu-item>
  </el-submenu>
</el-menu>
</el-aside>