Vue Element-Plus中：el-dropdown嵌套el-select下拉菜单无法选择怎么办？

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'
</script>

<template>
    <el-dropdown @visible-change="onChangeVisible">
    <span class="el-dropdown-link">
        <slot></slot>
    </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in menuItems">
                    {{ item.name }}
                    <el-select
                        v-model="item.options.name"
                        class="m-2"
                        placeholder="Select"
                        style="width: 150px"
                    >
                        <el-option
                            v-for="option in item.options"
                            :key="option.id"
                            :label="option.name"
                            :value="option.id"
                        />
                    </el-select>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script>
export default {
    data() {
        return {
            name : ref('')
        }
    },
    props: {
        menuItems : []
    },
    methods: {
        onChangeVisible(visible) {
            this.$emit('changeMenuVisible',visible);
        }
    }
}
</script>