update

examples/App.vue

 <template>
   <div id="app">
     <vue-form
+      asideWidth="295px"
       :menus="menus"
-      :default-active="currentActive"
       @change="handleChange"
       @success="handleSuccess"
       @error="handleError"
@@ -36,13 +36,64 @@ function url2Json(url) {
 }
 const query = url2Json(location.href)
 const projectId = query.projectId || '1000'
+
+const menus = [
+  {
+    id: 'center',
+    title: '报名中心'
+  },
+  {
+    id: 'entry',
+    title: '办理入学',
+    isGroup: true,
+    children: [
+      {
+        id: 'entry_required',
+        title: '必填项',
+        children: [
+          {
+            id: 'entry_protocol',
+            title: '入学协议',
+            showProgress: true,
+            progress: 0
+          },
+          {
+            id: 'entry_payment',
+            title: '缴费凭证',
+            showProgress: true,
+            progress: 0
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'user',
+    title: '个人信息',
+    children: [
+      {
+        id: 'user_info',
+        title: '个人信息修改'
+      },
+      {
+        id: 'user_password',
+        title: '密码修改'
+      }
+    ]
+  },
+  {
+    id: 'download',
+    title: '相关下载'
+  }
+]
+
 export default {
   name: 'app',
   data() {
     return {
       projectId,
       currentActive: query.active || 'profile',
-      menus: projectId === '1000' ? sofiaForm : kelleyForm
+      menus: projectId === '1000' ? [...sofiaForm, ...menus] : kelleyForm
     }
   },
   computed: {
@@ -84,3 +135,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+</style>

src/VueForm.vue

 <template>
   <div class="ezj-container">
     <ezj-aside :width="asideWidth">
-      <ezj-menu :menus="menus" @select="onSelect"></ezj-menu>
+      <ezj-menu :default-active="defaultActive" :menus="menus" @select="onSelect"></ezj-menu>
     </ezj-aside>
     <ezj-main :title="currentPage.title" v-if="currentPage" :key="activeId">
       <slot>
@@ -22,6 +22,7 @@ import EzjFormPane from '@/components/layout/FormPane'
 export default {
   name: 'VueForm',
   props: {
+    asideWidth: String,
     menus: {
       type: Array,
       required: true,

src/components/layout/Main.vue

@@ -24,8 +24,12 @@ export default {
   flex: 1;
   margin: 0 40px;
 }
+.ezj-main__hd {
+  margin-bottom: 26px;
+}
 .ezj-main__title {
   font-size: 24px;
+  line-height: 1.4;
   color: #000;
 }
 </style>

src/components/layout/Menu.vue

@@ -5,19 +5,19 @@
         :class="{'ezj-menu__item': true,'has-shadow': menu.hasShadow, 'is-active': menu.isActive}"
         :key="menu.id"
       >
-        <div class="ezj-menu__title" @click="handleClick(menu.id)">{{menu.title}}</div>
+        <div class="ezj-menu__title" @click="handleSelect(menu.id, menu)">{{menu.title}}</div>
         <template v-if="menu.children">
           <template v-if="menu.isGroup">
             <template v-for="submenu in menu.children">
-              <div class="ezj-menu-group" :key="submenu.title">
+              <div class="ezj-menu-group" :key="submenu.title" v-show="menu.isActive">
                 <div class="ezj-menu-group__title">{{submenu.title}}</div>
-                <ezj-submenu :menus="submenu.children" @onClick="handleClick"></ezj-submenu>
+                <ezj-submenu :menus="submenu.children" @onClick="handleSelect"></ezj-submenu>
               </div>
             </template>
           </template>
           <template v-else>
             <!-- 子菜单 -->
-            <ezj-submenu :menus="menu.children" @onClick="handleClick"></ezj-submenu>
+            <ezj-submenu :menus="menu.children" @onClick="handleSelect" v-show="menu.isActive"></ezj-submenu>
           </template>
         </template>
       </div>
@@ -43,7 +43,9 @@ export default {
   },
   data() {
     return {
-      currentActive: null
+      menuList: [],
+      currentActive: null,
+      activeIds: []
     }
   },
   watch: {
@@ -52,12 +54,71 @@ export default {
       handler(value) {
         this.currentActive = value
       }
+    },
+    menus: {
+      immediate: true,
+      deep: true,
+      handler(list) {}
     }
   },
   methods: {
-    handleClick(id) {
+    handleSelect(id, menu) {
+      // 有子节点的，选中子节点中的第一个
+      id = this.getFirstMenuId(menu)
+      // 当前ID
       this.currentActive = id
+      // 设置选中的ID，包含父级的ID
+      this.activeIds = this.setActiveIds(this.menus, id)
+      // 更新选中状态
+      this.changeActiveStatus(this.menus, this.activeIds)
       this.$emit('select', id)
+    },
+    // 更新菜单数据isActve的状态
+    changeActiveStatus(menus, selected) {
+      menus.forEach(item => {
+        // item.isActive = selected.includes(item.id)
+        this.$set(item, 'isActive', selected.includes(item.id))
+        item.children && this.changeActiveStatus(item.children, selected)
+      })
+    },
+    // 设置选中的id
+    setActiveIds(arr, id) {
+      let result = []
+      for (const item of arr) {
+        if (item.id === id || id === undefined) {
+          result.push(item.id)
+          break
+        }
+        if (item.children) {
+          result.push(item.id)
+          let childrenResult = this.setActiveIds(item.children, id)
+          result = result.concat(childrenResult)
+          if (childrenResult.length) {
+            break
+          } else {
+            result.length = 0
+          }
+        }
+      }
+      return result
+    },
+    getFirstMenuId(menu) {
+      if (menu.children && menu.children.length) {
+        const [first] = menu.children
+        if (first.children && first.children) {
+          return this.getFirstMenuId(first)
+        } else {
+          return first.id
+        }
+      }
+      return menu.id
+    }
+  },
+  beforeMount() {
+    // 没有设置默认选中的，
+    if (!this.defaultActive && this.menus.length) {
+      const [first] = this.menus
+      this.handleSelect(first.id, first)
     }
   }
 }

src/components/layout/Submenu.vue

 <template>
   <div class="ezj-submenu">
     <template v-for="submenu in menus">
-      <div class="ezj-submenu__item" :key="submenu.id" @click="$emit('onClick', submenu.id)">
+      <div
+        class="ezj-submenu__item"
+        :class="{'is-active': submenu.isActive}"
+        :key="submenu.id"
+        @click="$emit('onClick', submenu.id, submenu)"
+      >
         <span>{{submenu.title}}</span>
         <!-- 是否必选 -->
         <template v-if="submenu.showRequired">{{submenu.required ? '': '（可选）'}}</template>
@@ -27,6 +32,9 @@ export default {
 </script>
 
 <style lang="scss">
+.ezj-submenu__item.is-active {
+  color: #c41230;
+}
 .is-success {
   color: #12c44a;
 }