elementplus组件库el-menu组件中的default-active属性使用

default-active属性用来设置初始默认选中的菜单。

但是点击菜单切换时这个变量的值不会同步改变,需要通过@select事件获取到当前点击的菜单index值,手动赋值来修改default-active绑定的变量。

当时的问题情景是点击菜单切换为当前激活项设置了背景颜色,当切换到菜单2后菜单2生效背景颜色,此时点击刷新按钮手动重置default-active到菜单1的index值,发现菜单1并没有生效背景颜色,打印发现default-active的值从一开始就一直是初始值菜单1的index,切换时也没有发生改变,应该是没有监听到改变所以未重新渲染。

`el-menu` 是 Element UI 库中的一个组件,用于创建导航菜单。`default-active` 和 `default-openeds` 是 `el-menu` 组件的两个重要属性。 1. **default-active**: - 这个属性用于设置当前激活菜单项的 `index` 值。 - 当页面加载时,`el-menu` 会根据 `default-active` 的值自动高亮显示对应的菜单项。 - 例如,如果你希望某个菜单项在页面加载时处于激活状态,可以将该菜单项的 `index` 值设置为 `default-active` 的值。 2. **default-openeds**: - 这个属性用于设置默认展开的子菜单的 `index` 值。 - 当页面加载时,`el-menu` 会根据 `default-openeds` 的值自动展开对应的子菜单。 - 例如,如果你希望某个子菜单在页面加载时处于展开状态,可以将该子菜单的 `index` 值设置为 `default-openeds` 的值。 以下是一个简单的示例,展示了如何使用这两个属性: ```html <template> <el-menu :default-active="activeIndex" :default-openeds="openedIndexs"> <el-menu-item index="1">菜单项 1</el-menu-item> <el-submenu index="2"> <template slot="title">子菜单</template> <el-menu-item index="2-1">子菜单项 1</el-menu-item> <el-menu-item index="2-2">子菜单项 2</el-menu-item> </el-submenu> <el-menu-item index="3">菜单项 3</el-menu-item> </el-menu> </template> <script> export default { data() { return { activeIndex: '1', // 设置默认激活的菜单项 openedIndexs: ['2'] // 设置默认展开的子菜单 }; } }; </script> ``` 在这个示例中,菜单项 1 会被默认激活,子菜单会被默认展开。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值