el-dropdown下拉菜单中实现点击菜单中的一项再弹出一个el-dropdown下拉菜单

在Element UI的`el-dropdown`组件中，如果你想要实现点击菜单中的某一项后再次弹出一个新的下拉菜单，你可以通过监听原下拉菜单中的`click`事件，然后在处理函数中动态创建并显示新的`el-dropdown`。以下是一个简单的步骤说明：

1. 首先，在原`el-dropdown`的选项项中，给每一项添加一个自定义属性，比如`data-popover`，用于标识该选项需要打开的新下拉菜单。

<template>
  <el-dropdown v-model="dropdownVisible" @command="handleCommand">
    <!-- 原始下拉菜单 -->
    <el-menu-item-group title="一级菜单">
      <el-menu-item :index="0" data-popover="二级菜单1">菜单1</el-menu-item>
      <el-menu-item :index="1" data-popover="二级菜单2">菜单2</el-menu-item>
    </el-menu-item-group>
  </el-dropdown>
</template>

2. 然后，在Vue实例中，为`handleCommand`函数添加逻辑，当点击特定菜单项时，检查其`data-popover`属性，并根据这个值来判断是否需要展示新的下拉菜单。这里可以利用`ref`来引用新下拉菜单的元素，并设置初始状态为隐藏。

<script>
export default {
  data() {
    return {
      dropdownVisible: false,
      newDropdown: null, // 新的el-dropdown ref
    };
  },
  methods: {
    handleCommand(command) {
      if (command.dataPopover) {
        this.newDropdown = document.querySelector(`[data-popover="${command.dataPopover}"]`);
        this.newDropdown.show(); // 展示新的下拉菜单
      } else {
        // 如果没有指定popover，则关闭当前下拉菜单
        this.dropdownVisible = false;
      }
    },
  },
};
</script>