elementplus+vue3+ts+setup el-sub-menu 设置仅通过点击图标展示下拉框,点击文字左侧图标，正常切换菜单

Element Plus是一个基于Vue 3和TypeScript的UI组件库，它扩展了Vue的原生功能，并提供了一套优雅、高性能的界面组件。`el-sub-menu` 是 Element Plus 中的一个子菜单组件，通常用于构建导航菜单结构。

如果你想设置 `el-sub-menu` 只有在用户点击图标时显示其下拉菜单，而点击文字左侧的图标时只是切换菜单项，你可以这样做：

首先，在模板 (`template`) 部分，将 `el-submenu` 的 `open-key` 属性设为子元素的唯一标识符，如 `index`，这将在点击图标时不触发展开：

<el-submenu :index="item.index" @click="$refs[item.subIndex].toggleVisible()">
  <template #title>
    <i class="your-icon-class"></i> <!-- 点击此处的图标 -->
    {{ item.name }}
  </template>
  <el-menu-item ref="item.subIndex" v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
    <i :class="{ 'submenu-toggle': !subItem.isDisabled }" slot="icon"></i>
    {{ subItem.name }}
  </el-menu-item>
</el-submenu>

然后，你需要在 `script setup` 部分编写一些逻辑处理点击事件，当点击文字左侧的图标时，只更新当前菜单项的状态：

import { Ref } from "vue";

const menuRef = ref(null);

// 使用自定义事件或者ref的value属性来控制子菜单可见性
methods: {
  toggleVisible(subMenuRef: Ref<ElMenuItem>) {
    if (menuRef.value && menuRef.value !== subMenuRef) {
      // 如果已有其他子菜单打开，关闭它
      menuRef.value.doClose();
    }
    subMenuRef.value.doToggleVisible(); // 调用子菜单的toggleVisible方法来切换显示状态
  },
},
onMounted() {
  menuRef.value = this.$refs['item.subIndex']; // 初始化菜单引用
}

最后，在 `doClose` 和 `doToggleVisible` 这两个方法中，你需要在 Element Plus 的官方文档中查找对应的方法来实现实际的菜单操作。