Menu: update SubMenu to allow custom component (#10077)

packages/menu/src/submenu.vue

@@ -66,7 +66,7 @@
     computed: {
       // popper option
       appendToBody() {
-        return this.rootMenu === this.$parent;
+        return this.isFirstLevel;
       },
       menuTransitionName() {
         return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';
@@ -125,6 +125,19 @@
             ? this.activeTextColor
             : this.textColor
         };
+      },
+      isFirstLevel() {
+        let isFirstLevel = true;
+        let parent = this.$parent;
+        while (parent && parent !== this.rootMenu) {
+          if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
+            isFirstLevel = false;
+            break;
+          } else {
+            parent = parent.$parent;
+          }
+        }
+        return isFirstLevel;
       }
     },
     methods: {
@@ -196,7 +209,7 @@
         title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
       },
       updatePlacement() {
-        this.currentPlacement = this.mode === 'horizontal' && this.rootMenu === this.$parent
+        this.currentPlacement = this.mode === 'horizontal' && this.isFirstLevel
           ? 'bottom-start'
           : 'right-start';
       },
@@ -232,7 +245,7 @@
         disabled,
         popperClass,
         $slots,
-        $parent
+        isFirstLevel
       } = this;
 
       const popupMenu = (
@@ -267,7 +280,7 @@
       );
 
       const submenuTitleIcon = (
-        rootMenu.mode === 'horizontal' && $parent === rootMenu ||
+        rootMenu.mode === 'horizontal' && isFirstLevel ||
         rootMenu.mode === 'vertical' && !rootMenu.collapse
       ) ? 'el-icon-arrow-down' : 'el-icon-arrow-right';