<template>
  <el-submenu :popper-append-to-body="false" ref="subMenu" :index="routerInfo.name">
    <template slot="title">
      <i :class="'el-icon-'+routerInfo.meta.icon"></i>
      <span slot="title">{{routerInfo.meta.title|getTile}}</span>
    </template>
    <slot></slot>
  </el-submenu>
</template>

<script>
export default {
  name: 'AsyncSubmenu',
  props: {
    routerInfo: {
      default: function() {
        return null
      },
      type: Object
    }
  },
  filters:{
    getTile:(title)=>{
      let titles = title.split("-");
      if( titles.length>1 ) return titles[1];
      return title
    }
  }
}
</script>
<style lang="scss">
</style>