el-menu的使用（记录一下使用数组数据的情况）

做项目时遇到需要菜单项显示提示红点的场景，浅浅记录一下思路~

    <el-menu :default-openeds="openeds"  class="el-menu-vertical-demo" @open="handleOpen"  @close="handleClose"     text-color="#fff" active-text-color="#333" :unique-opened="true">
           <template v-for="item in menu"  >
             <template  v-if="item.is_sub" >
              <el-submenu :index="item.index" >
               <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.title}}</span>
               </template>
               <el-menu-item-group>  
                <template v-for="item1 in item.sub_item">
                  <router-link :to="item1.to">
                   <el-menu-item :index="item1.index" v-if="item1.authority()"  :key="item1.index">
                     <span class="badge">
                      <el-badge class="dot" is-dot :hidden="item1.is_dot"></el-badge>{{item1.title}}
                     </span>
                   </el-menu-item>
                  </router-link>
                </template>
              </el-menu-item-group>
             </el-submenu>
            </template>
            <template v-else>
             <router-link   :to="item.to" v-if="item.authority">
              <el-menu-item index="4" >
               <i class="el-icon-s-home"></i>
               <span slot="title">首页</span>
               </el-menu-item>
             </router-link>
            </template>
          </template>
        </el-menu> 

js

<script>
export default {
  name: 'app',
  data () {
    return {
      node_list:storage.get('meun').node_list, //获得授权节点,
      menu:[
        {is_sub:false,
         title:'首页',
         index:'4',
         to:"/get_Data/getStatisticsByOrder",
        },
        {is_sub:true,
         title:'用户管理',
         index:'9',
         sub_item:[
            {title:'角色列表',index:'9-1',authority:()=>{return this.node_list[1].indexOf('user_auth_list') != -1},to:"/user/auth_list",is_dot:false},
            {title:'用户列表',index:'9-2',authority:()=>{return this.node_list[2].indexOf('user_getuserlist') != -1},to:"/user/user_list",is_dot:false},
            {title:'所有节点',index:'9-3',authority:()=>{return this.node_list[1].indexOf('user_get_node_list') != -1},to:"/user/node_list",is_dot:true}]
        },
        {is_sub:true,
         title:'公告管理',
         index:'1',
         sub_item:[
            {title:'新建公告',index:'1-1',authority:()=>{return this.node_list[1].indexOf('message_addmessage') != -1},to:"/Message/addMessage/0",is_dot:true},
            {title:'公告列表',index:'1-2',authority:()=>{return this.node_list[1].indexOf('message_getlist') != -1},to:"/Message/MessageList",is_dot:false},
            {title:'公告发送记录',index:'1-3',authority:()=>{return this.node_list[1].indexOf('message_getmsgreceive') != -1},to:"/Message/getMsgReceive",is_dot:false}]}
      ],
      openeds:['9']
    }
  }
 }
</script>