From b3b4134d8bc53a6901e64f7a25809e560230af01 Mon Sep 17 00:00:00 2001
From: zhigang.li <zhigang.li@tendcloud.com>
Date: Wed, 4 Apr 2018 12:01:29 +0800
Subject: [PATCH] fixed https://github.com/iview/iview/issues/3298

---
 examples/routers/menu.vue    | 101 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------
 src/components/menu/menu.vue |  29 +++++++++++++++++------------
 2 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/examples/routers/menu.vue b/examples/routers/menu.vue
index b2507e2..4138919 100644
--- a/examples/routers/menu.vue
+++ b/examples/routers/menu.vue
@@ -1,46 +1,69 @@
 <template>
-    <Menu active-name="1-2" :open-names="['1']" theme="dark">
-        <Submenu name="1">
-            <template slot="title">
-                <Icon type="ios-analytics"></Icon>
-                Navigation One
-            </template>
-            <MenuGroup title="Item 1">
-                <MenuItem name="1-1">Option 1</MenuItem>
-                <MenuItem name="1-2">Option 2</MenuItem>
-            </MenuGroup>
-            <MenuGroup title="Item 2">
-                <MenuItem name="1-3">Option 3</MenuItem>
-                <MenuItem name="1-4">Option 4</MenuItem>
-            </MenuGroup>
-        </Submenu>
-        <Submenu name="2">
-            <template slot="title">
-                <Icon type="ios-filing"></Icon>
-                Navigation Two
-            </template>
-            <MenuItem name="2-1">Option 5</MenuItem>
-            <MenuItem name="2-2">Option 6</MenuItem>
-            <Submenu name="3">
-                <template slot="title">Submenu</template>
-                <MenuItem name="3-1">Option 7</MenuItem>
-                <MenuItem name="3-2">Option 8</MenuItem>
+    <div>
+        <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
+            <Submenu name="1">
+                <template slot="title">
+                    <Icon type="ios-analytics"></Icon>
+                    Navigation One
+                </template>
+                <MenuGroup title="Item 1">
+                    <MenuItem name="1-1">Option 1</MenuItem>
+                    <MenuItem name="1-2">Option 2</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="Item 2">
+                    <MenuItem name="1-3">Option 3</MenuItem>
+                    <MenuItem name="1-4">Option 4</MenuItem>
+                </MenuGroup>
             </Submenu>
-        </Submenu>
-        <Submenu name="4">
-            <template slot="title">
-                <Icon type="ios-gear"></Icon>
-                Navigation Three
-            </template>
-            <MenuItem name="4-1">Option 9</MenuItem>
-            <MenuItem name="4-2">Option 10</MenuItem>
-            <MenuItem name="4-3">Option 11</MenuItem>
-            <MenuItem name="4-4">Option 12</MenuItem>
-        </Submenu>
-    </Menu>
+            <Submenu name="2">
+                <template slot="title">
+                    <Icon type="ios-filing"></Icon>
+                    Navigation Two
+                </template>
+                <MenuItem name="2-1">Option 5</MenuItem>
+                <MenuItem name="2-2">Option 6</MenuItem>
+                <Submenu name="3">
+                    <template slot="title">Submenu</template>
+                    <MenuItem name="3-1">Option 7</MenuItem>
+                    <MenuItem name="3-2">Option 8</MenuItem>
+                </Submenu>
+                <Submenu name="4">
+                    <template slot="title">Submenu</template>
+                    <MenuItem name="4-1">Option 7</MenuItem>
+                    <MenuItem name="4-2">Option 8</MenuItem>
+                </Submenu>
+            </Submenu>
+            <Submenu name="5">
+                <template slot="title">
+                    <Icon type="ios-gear"></Icon>
+                    Navigation Three
+                </template>
+                <MenuItem name="5-1">Option 9</MenuItem>
+                <MenuItem name="5-2">Option 10</MenuItem>
+                <MenuItem name="5-3">Option 11</MenuItem>
+                <MenuItem name="5-4">Option 12</MenuItem>
+            </Submenu>
+        </Menu>
+        <Button @click="setOpenNames">修改展开数组</Button>
+    </div>
 </template>
 <script>
     export default {
-
+        data () {
+            return {
+                openNames: ['1']
+            };
+        },
+        methods: {
+            handleOpenChange (name) {
+                console.log(name)
+            },
+            setOpenNames () {
+                this.openNames = ['2', '3'];
+                this.$nextTick(() => {
+                    this.$refs.menu.updateOpened();
+                })
+            }
+        }
     }
 </script>
diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue
index 187859a..e5b5abe 100644
--- a/src/components/menu/menu.vue
+++ b/src/components/menu/menu.vue
@@ -43,7 +43,8 @@
         },
         data () {
             return {
-                currentActiveName: this.activeName
+                currentActiveName: this.activeName,
+                openedNames: []
             };
         },
         computed: {
@@ -76,36 +77,40 @@
                 this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName);
             },
             updateOpenKeys (name) {
-                const index = this.openNames.indexOf(name);
-                if (index > -1) {
-                    this.openNames.splice(index, 1);
+                let names = [...this.openedNames];
+                const index = names.indexOf(name);
+                if (index >= 0) {
+                    names.splice(index, 1);
                 } else {
-                    this.openNames.push(name);
                     if (this.accordion) {
-                        let currentSubmenu = {};
+                        let currentSubmenu = null;
                         findComponentsDownward(this, 'Submenu').forEach(item => {
                             if (item.name === name) currentSubmenu = item;
                         });
                         findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
-                            let index = this.openNames.indexOf(item.name);
-                            this.openNames.splice(index, index >= 0 ? 1 : 0);
+                            let i = names.indexOf(item.name);
+                            if (i >= 0) names.splice(i, 1);
                         });
-                        this.openNames.push(name);
+                        names.push(name);
                     }
                 }
+                this.openedNames = names;
+                this.$emit('on-open-change', this.openedNames);
             },
             updateOpened () {
                 const items = findComponentsDownward(this, 'Submenu');
 
                 if (items.length) {
                     items.forEach(item => {
-                        if (this.openNames.indexOf(item.name) > -1) item.opened = true;
+                        if (this.openedNames.indexOf(item.name) > -1) item.opened = true;
+                        else item.opened = false;
                     });
                 }
             }
         },
         mounted () {
             this.updateActiveName();
+            this.openedNames = [...this.openNames];
             this.updateOpened();
             this.$on('on-menu-item-select', (name) => {
                 this.currentActiveName = name;
@@ -113,8 +118,8 @@
             });
         },
         watch: {
-            openNames () {
-                this.$emit('on-open-change', this.openNames);
+            openNames (names) {
+                this.openedNames = names;
             },
             activeName (val) {
                 this.currentActiveName = val;
--
libgit2 0.21.4