element ui 左侧导航栏

<el-menu class="left-menu" :default-active="$route.name" :unique-opened="true" :collapse="isCollapse">

      <template v-for="(m, x) in menuOpts.data" >

        <el-submenu v-if="m.children.length && m.show" :index="m.value" class="level1-menu" :key="x">

          <template slot="title">

            <e-icon :name="m.icon"></e-icon>

            <span>{{m.label}}</span>

          </template>

          <el-menu-item-group v-if="m.children.length && m.show == true">

            <template v-for="c in m.children">

              <el-submenu v-if="c.children && c.show == true" :index="c.value">

                <template slot="title">{{c.label}}</template>

                <el-menu-item class="level2-menu submenu" v-for="(child, s) in c.children" :key="s" @click.native="stateGo(child.value,1)" :index="child.value">{{child.label}}</el-menu-item>

              </el-submenu>

              <el-menu-item v-if="!c.children && c.show == true" :index="c.value" @click.native="stateGo(c.value,2)" class="level2-menu submenu">

              <template slot="title">

                <span>{{c.label}}</span>

              </template>

            </el-menu-item>

            </template>

          </el-menu-item-group>      

        </el-submenu>

        <el-menu-item v-if="!m.children.length && m.show == true"

          :index="m.value" @click.native="stateGo(m.value,0)" class="level1-menu submenu" :key="x">

          <e-icon :name="m.icon"></e-icon>

          <span slot="title">{{m.label}}</span>

        </el-menu-item>

      </template>

    </el-menu>

 

数据  

menuOpts: {

 data: [

            {

              value: 'onBoard',

              label: '入职管理',

              icon: 'card',

              show: true,

              children: [

                {

                  value: 'home',

                  label: '入职首页',

                  icon: 'desktop',

                  show: true,

                },

                {

                  value: 'onBoard.joined',

                  label: '已入职',

                  show: true

                },

                {

                  value: 'onBoard.history',

                  label: '历史已入职',

                  show: true

               }

              ]

            },

            {

              value: 'renewal',

              label: '合同续签',

              icon: 'card',

              show: true,

              children: [

                {

                  value: 'renewal.waiting',

                  label: '待续签',

                  show: true

                },

                {

                  value: 'renewal.joined',

                  label: '已续签',

                  show: true

                },

                {

                  value: 'renewal.unjoined',

                  label: '未续签',

                  show: true

                },

              ]

            },

{

              value: 'system',

              label: '系统配置管理',

              icon: 'setting',

              show: true,

              children: [

                {

                  value: 'system.tenant',

                  label: '租户定义',

                  show: true,

                },

                {

                  value: 'system.renewal',

                  label: '合同续签',

                  show: true,

                  children: [

                    {

                      value: 'system.renewal.material',

                      label: '资料配置',

                      show: true

                    },

                  ]

                },

                {

                  value: 'system.leave',

                  label: '离职管理',

                  show: true,

                  children: [

                    {

                      value: 'system.leave.material',

                      label: '资料配置',

                      show: true

                    },

                  ]

                },

              ]

            }

          ],

          active: 'home'

}