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>