SubMenu.vue

<template>
  <div>
    <template v-for="(item) in subMenuList">
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :key="item.index"
        :index="item.index"
      >
        <template slot="title">
          <i
            class="el-icon-caret-bottom"
            v-if="getOpenFlag(item.index)"
          ></i>
          <i class="el-icon-caret-right" v-else></i>
          <!-- <img :src="item.icon" alt=""> -->
          <span>{{ item.name }}</span>
        </template>
        <SubMenu :subMenuList="item.children" :openFlgArr="openFlgArr" />
      </el-submenu>
      <el-menu-item v-else :key="item.path" :index="item.path">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
import SubMenu from "./SubMenu.vue";

export default {
  name: "SubMenu",
  components: { SubMenu },
  props: ["subMenuList", "openFlgArr"],
  methods: {
    getOpenFlag(index) {
      return this.openFlgArr.includes(index);
    },
  },
};
</script>

<style>
.el-menu--collapse > div > .el-menu-item span,
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
</style>