<template>
  <el-submenu index="1">
    <template  v-for="(value,key) in items">
      <template v-if="value.parent" slot="title"><i class="el-icon-message"></i>{{value.name}}</template>
      <el-menu-item v-else index="value.id">{{value.name}}</el-menu-item>
    </template>
  </el-submenu>
</template>

<script>
export default {
  data() {
    const item = [{
      id: '1',
      name: '选项1',
      parent:true
    },{
      id: '1-1',
      name: '选项1-1',
      parent:false
    },{
      id: '1-2',
      name: '选项1-2',
      parent:false
    },{
      id: '1-3',
      name: '选项1-3',
      parent:false
    },{
      id: '1-4',
      name: '选项1-4',
      parent:false
    }
  ];
    return {
        items:item
    }
  }
}
</script>

<style>

</style>

这是把代码写到了detailItem里，
然后这是使用

<template>
<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1']">
      <detailItem></detailItem>
    </el-menu>
  </el-aside>
</el-container>
</template>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
import detailItem from './detailItem'
  export default {
    name:'eleTest',
    data() {

      return {
        
      }
    },
    components:{
      detailItem
    }
  };
</script>

发现单击列表单个变色失去作用了，
是否是因为el-menu是一个整体的组件的原因