2021-1-14 关于递归生成el-menu的踩坑

遇见的问题

递归生成menu是没有问题的

<template>
  <el-submenu
    v-if="isDropDownMenu(routerData)"
    :index="routerData.path"
  >
    <template v-slot:title>
      {{ getMenuLabel(routerData) }}
    </template>
    <MenuItem
      v-for="(item, itemIndex) in routerData.children"
      :key="itemIndex"
      :routerData="item"
    />
  </el-submenu>
  <el-menu-item
    :index="routerData.path"
    v-else
  >
    {{ getMenuLabel(routerData) }}
  </el-menu-item>
</template>

<script>

export default {
  name: 'MenuItem',
  props: ['routerData'],
  // created() {
  //   console.log(this.routerData);
  // },
  methods: {
    isDropDownMenu(data) {
      return data.children && data.children.length > 1;
    },

    getMenuLabel(data) {
      return data.meta.breadcrumb.label;
    },
  },
};
</script>

<style>
</style>

但是当鼠标hover到生成的el-submenu上时会报错

尝试解决

在el-submenu外层加上div

<div v-if="isDropDownMenu(routerData)">
<el-submenu
    :index="routerData.path"
    :popper-append-to-body="false"
  >
    <template v-slot:title>
      {{ getMenuLabel(routerData) }}
    </template>
    <MenuItem
      v-for="(item, itemIndex) in routerData.children"
      :key="itemIndex"
      :routerData="item"
    />
</el-submenu>
</div>

可以解决， 但是有样式问题，因为外层包了div

但是调一下样式也是可以用的

觉得应该有别的解决方法，然后就发现了这个解决方法

<el-submenu
    v-if="isDropDownMenu(routerData)"
    :index="routerData.path"
    :popper-append-to-body="false"
  >

加上:popper-append-to-body="false"后，完美解决报错，不用包div，也不用改样式了