本文共 831 字，大约阅读时间需要 2 分钟。

两种方式实现菜单项默认活跃状态配置

随着前端框架技术的不断发展，用户界面越来越注重互动性和便捷性。使用默认活跃状态可以为菜单项提供即时反馈，提升用户体验。以下是两种配置默认活跃状态的方法。

一、利用default-active属性实现

在EaseUI的菜单组件中，通过设置default-active属性即可实现菜单项的默认活跃状态。以下是一个典型示例：

.el-menu-vertical-demo {  @open="handleOpen"  @close="handleClose"  default-active="1-1"}

此处，default-active设定为"1-1"，表示当菜单加载时，第一个子项将处于活跃状态。在实际使用中，只需在菜单标签中设置此属性，对应菜单项的逻辑路径即可。

二、添加submenu子菜单实现

在某些场景下，默认活跃状态可能无法满足复杂交互需求。这时，可以添加下拉事件来覆盖自定义逻辑。使用sub_key和sub-menu子菜单的方式，实现更加灵活的菜单控制。

  
       
    
           选项1      
             
      
       子选项1
              
      
       子选项2
            
         
      
   

在此示例中，通过设置@open="handleOpen"和@close="handleClose"事件回调，可以自定义菜单的展开和收缩行为。子菜单的展开状态将根据自定义逻辑进行设置，充分满足个性化交互需求。

需要注意的是，是否为true的展开状态，需在事件处理中通过js逻辑实现。这种方式适用于复杂场景，但增加了相应的业务逻辑编写量。

搭配使用default-active属性，可以实现快速初始化，同时通过子菜单和事件操作，满足个性化的交互场景。这两种方式各有优势，用户可根据实际需求选择最合适的实现方案。

转载地址：http://lhatz.baihongyu.com/