如何设置 Vue3+ Element plus 的 el-submenu 元素，以便当用户点击特定图标时自动展开下拉菜单？

在 Vue3 中，Element Plus 提供的 `el-submenu` 是用于构建导航栏二级菜单的组件。如果你想要在用户点击特定图标时自动展开下拉菜单，你可以通过绑定 `command` 或者自定义事件监听并手动控制 `active-key` 属性来实现。

下面是一个基本的例子：

<template>
  <el-menu :default-active="activeIndex">
    <el-submenu v-for="(item, index) in menuItems" :key="index" :command="item.command">
      <template #title>
        <i class="your-icon-class"></i> {{ item.name }}
      </template>
      <el-menu-item :index="item.children[0].index"> <!-- 这里假设你的下拉项有唯一标识 -->
        <span slot="submenu-title">{{ item.children[0].name }}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';
const activeIndex = ref('');
const menuItems = [
  {
    name: '菜单一',
    command: 'menuOne', // 这个是你自定义的命令名
    children: [{ /* 下拉项数据 */ }]
  },
  ...其他菜单项
];

function toggleSubMenu(itemCommand) {
  if (activeIndex.value === itemCommand) {
    activeIndex.value = null; // 如果当前选中的是该子菜单，取消选中
  } else {
    activeIndex.value = itemCommand; // 否则选中该子菜单
  }
}

// 可以将这个函数绑定到某个按钮的 @click 事件
<button @click="toggleSubMenu('menuOne')">
  <i class="your-icon-class"></i> 扩展菜单
</button>
</script>

在这个例子中，我们首先定义了一个 `toggleSubMenu` 函数，它会根据传入的命令切换 `activeIndex`，从而实现菜单的展开。然后，我们在一个按钮上绑定了这个函数，点击按钮时触发菜单的展开。