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

Bug_Yilis

于 2022-07-15 14:25:35 发布

阅读量2.4k

点赞数 2

分类专栏： vue 文章标签： vue elementui 前端

本文链接：https://blog.youkuaiyun.com/Y1lis/article/details/125801332

版权

本文探讨了如何在Vue项目中使用Element UI的el-menu组件时，确保初次加载时默认选中第一个菜单项，并在抽屉关闭后正确重置选中状态。通过添加ref属性并手动设置activeIndex，解决了组件状态未能更新的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在做侧边菜单栏的时候可能会使用到【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="