【ElementUI】组件库el-menu组件在退出抽屉时无法将选中状态恢复到第一项

 我们在做侧边菜单栏的时候可能会使用到【el-menu】这个组件，接下来就要考虑到一个问题，初始化界面的时候应该把第一个item设置为默认选中状态吧，这个效果的话实现比较简单，只需在data中定义default-active属性的变量名'activeMenu'赋值为'0'，页面初始化就会默认选中第一下项并赋予高亮状态。

<el-drawer
        title="账号详情"
        :visible.sync="drawerDetail"
        :size="drawerWidth"
        @close="closeDrawer"
        v-loading="filterloading"
    >

<el-menu
                    :default-active="activeMenu"
                    class="el-menu-vertical-demo"
                    @select="handleSelect"
                >
                    <el-menu-item index="0" @click="">
                        <span slot="title">基础信息</span>
                    </el-menu-item>
                    <el-menu-item index="1" @click="">
                        <span slot="title">绑定</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="">
                        <span slot="title">订单</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="">
                        <span slot="title">订单</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="">
                        <span slot="title">优惠券</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="">
                        <span slot="title">积分</span>
                    </el-menu-item>
                    <el-menu-item index="6" @click="">
                        <span slot="title">兑换记录</span>
                    </el-menu-item>
                </el-menu>
</el-drawer>

data () {
        return {
            activeMenu: '0',        //菜单栏选中索引值
        }
    },
methods: {
        handleSelect (index) {
            this.activeMenu = index

        },
//关闭
        closeDrawer () {
            this.activeMenu = '0'
        }
}

 可以看到，当进入页面初始化状态就是默认选中了第一项。但是如果我们切换到第二项退出再进来呢？

 

 

可以看到选中第二项退出了再进入还是默认选中第二项，明明退出这个抽屉的时候就将默认选中状态设置为第一项，为什么没有效果？

 

 我们退出的时候打印一下这个'activeMenu'的值，看一下有没有修改成功

 

 可以看到，我们退出的时候是已经把这个activeMenu的默认选中值赋值为了'0',但依然没有切换回第一项，后来在翻阅文档中，发现了一种解决方案，以下参考代码。

<el-drawer
        title="账号详情"
        :visible.sync="drawerDetail"
        :size="drawerWidth"
        @close="closeDrawer"
        v-loading="filterloading"
    >

<el-menu
                    :default-active="activeMenu"
                    class="el-menu-vertical-demo"
                    @select="handleSelect"
                    ref="menuRef"
                >
                    <el-menu-item index="0" @click="">
                        <span slot="title">基础信息</span>
                    </el-menu-item>
                    <el-menu-item index="1" @click="">
                        <span slot="title">绑定</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="">
                        <span slot="title">订单</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="">
                        <span slot="title">订单</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="">
                        <span slot="title">优惠券</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="">
                        <span slot="title">积分</span>
                    </el-menu-item>
                    <el-menu-item index="6" @click="">
                        <span slot="title">兑换记录</span>
                    </el-menu-item>
                </el-menu>
</el-drawer>

data () {
        return {
            activeMenu: '0',        //菜单栏选中索引值
        }
    },
methods: {
        handleSelect (index) {
            this.activeMenu = index

        },
//关闭
        closeDrawer () {
            this.activeMenu = '0'
            this.$refs.menuRef.activeIndex = '0'
            console.log('activeMenu的值是',this.activeMenu)
        }
}

给menu添加一个ref属性，在关闭抽屉的时候将menu的activeIndex赋值为'0'就能完美的解决这个问题了。希望对你有所帮助。 

代码仅供参考。转载请附上原文出处链接和本声明。