el-submenu点击高亮并且父级菜单展开

在Vue.js中，`el-menu`和`el-submenu`是Element UI库中用于构建导航菜单的组件。当你需要实现当用户点击子菜单(`el-submenu`)时，不仅子菜单会高亮显示，同时它的父级菜单(`el-menu`)也会自动展开的效果，你可以通过绑定`@click`事件并管理状态来实现。

首先，在`el-menu`上设置默认关闭状态，并添加一个`openKeys`属性来保存已展开的菜单路径：

<template>
  <el-menu :default-active="['0-1']" class="menu-root" @open="handleMenuOpen" ref="menu">
    <!-- ... -->
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      openKeys: [], // 存储已展开的菜单路径
    };
  },
  methods: {
    handleMenuOpen(key) {
      this.openKeys.push(key); // 当子菜单打开时，将key添加到openKeys
      const parentKey = key.split('-')[0]; // 获取当前子菜单的父级菜单key
      if (!this.openKeys.includes(parentKey)) { // 如果父级未展开，则也展开它
        this.openKeys.push(parentKey);
      }
    },
    // ...其他方法...
  },
};
</script>

然后，在`el-submenu`上设置`index`属性关联到`openKeys`：

<el-submenu index="0-1" v-if="..."> <!-- 使用v-if动态绑定内容 -->
  <template slot="title">
    <span>子菜单</span>
  </template>
  <el-menu-item index="0-2">子菜单项</el-menu-item>
</el-submenu>

这样，当你点击子菜单时，`handleMenuOpen`会被触发，不仅子菜单会高亮，而且如果有必要的话，其父级菜单也会随之展开。记得在实际项目中根据需求调整逻辑，比如判断是否需要检查所有祖先节点是否都已展开等。