Vue3中Ant Design V3.2.20 Select二次点击下拉闪烁自动关闭求助

问题详情 #

使用Vue3搭配Ant Design Vue v3.2.20开发时，Select组件首次点击能正常显示10个默认下拉选项，但第二次及之后点击时，下拉选项仅闪烁一下就自动关闭，每次点击都会出现该问题。

组件核心代码：

<a-select
  v-model:value="line.slot_1"
  showSearch
  style="width: 140px"
  :allowClear=true
  :options="state?.afterSearchJobCards"
  @search="fetchJobCardsWithDebounce" >
</a-select>

Vite插件配置：

Components({ resolvers: [AntDesignVueResolver()] })

组件功能：

• 带搜索功能的下拉框，默认显示10个选项
• 搜索时调用接口获取更多可选选项
• 选中选项后更新对应slot的状态并显示选中值

排查及解决方案 #

1. 响应式数组更新触发组件重渲染 #

如果每次搜索后直接替换state.afterSearchJobCards的数组引用，会导致Select组件意外重渲染，下拉框被强制关闭。

解决办法：
避免直接赋值新数组，改为修改原数组内容：

// 错误写法：直接替换数组
state.afterSearchJobCards = newFetchedData

// 正确写法：清空原数组后添加新数据
state.afterSearchJobCards.length = 0
state.afterSearchJobCards.push(...newFetchedData)

2. 自动导入组件的版本或依赖冲突 #

使用Components插件自动导入AntD组件时，可能出现组件依赖缺失或版本不匹配的情况。

解决办法：
暂时替换自动导入方式，手动导入Select组件及样式：

<script setup>
import { Select } from 'ant-design-vue'
import 'ant-design-vue/es/select/style/css'
</script>

<template>
  <a-select
    <!-- 保留原有属性配置 -->
  ></a-select>
</template>

同时检查package.json，确认Ant Design Vue版本确实为3.2.20，无其他依赖导致版本冲突。

3. 事件冒泡触发意外关闭逻辑 #

父组件的点击事件或全局点击监听，可能触发下拉框的关闭逻辑。

解决办法：
在Select组件上添加@mousedown.stop阻止事件冒泡：

<a-select
  v-model:value="line.slot_1"
  showSearch
  style="width: 140px"
  :allowClear=true
  :options="state?.afterSearchJobCards"
  @search="fetchJobCardsWithDebounce"
  @mousedown.stop >
</a-select>

4. allowClear属性写法问题 #

:allowClear=true的写法可能存在响应式绑定问题，改用kebab-case的布尔属性写法：

<a-select
  v-model:value="line.slot_1"
  showSearch
  style="width: 140px"
  allow-clear
  :options="state?.afterSearchJobCards"
  @search="fetchJobCardsWithDebounce" >
</a-select>

内容的提问来源于stack exchange，提问作者Taha Siddiqui