vue element-plus 下拉菜单嵌套选择器 选择器自动收起 无法选择 解决办法

写一个组件，<el-dropdown>嵌套着<el-select>使用,el-select选择后，el-select自动收起，然后<el-dorpdown>也同时收起了。
//例如这种,点击任意选项，都会收起.

找到el-select的下拉框开启与关闭会调动的方法。

找到el-dropdown的下拉框开启与关闭的方法

1.我们定义一个方法，来实现el-dropdown的开启方法

//开启el-dorpdown下拉框
const open = () => {
  dropdownref.value.handleOpen()
}

2.绑定一个方法到el-select组件的 @visible-change事件

const change = () => {
  open()
}

此时再点击，则el-dropdown不会因为el-select的收起而收起。
全部代码

<template>
  <div class="appcontainer">
    <el-dropdown ref="dropdownref" trigger="click">
      <div class="label">解决el-select收起时,el-dropdown同时收起的问题</div>
      <template #dropdown>
        <el-dropdown-menu class="menu">
          <el-select class="sel" v-model="value" @visible-change="change">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
const value = ref('')
const dropdownref = ref<any>(null)

let options = [
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 },
  { label: '选项4', value: 4 },
  { label: '选项5', value: 5 }
]

//开启el-dorpdown下拉框
const open = () => {
  dropdownref.value.handleOpen()
}

const change = () => {
  open()
}
</script>

<style lang="less" scoped>
.appcontainer {
  display: flex;
  justify-content: center;
}
.menu {
  width: 600px;
  background-color: pink;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  height: 2000px;
}

.sel {
  width: 200px;
  margin: 20px;
}
</style>