Antd Select组件自定义下拉dropdownRender菜单时，点击事件需要点击两次才生效的问题

cabbage'sOxAndHorse

已于 2022-10-24 16:17:53 修改

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue+antd 文章标签：前端 vue.js 1024程序员节

于 2022-10-24 16:16:24 首次发布

本文链接：https://blog.csdn.net/lowers_1/article/details/127494821

vue+antd 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue的<a-select>组件中，通过添加dropdownRender模板和鼠标点击事件(e.preventDefault())来防止下拉框的默认选中行为，以便更好地响应用户自定义操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <a-select
    v-model:value="value"
  >
    <template #dropdownRender="{ menuNode: menu }">
      <div
        style="padding: 4px 8px; cursor: pointer"
        @mousedown="e => e.preventDefault()"
        @click="addItem"
      >
        <ul>
           <li v-for="item in list" :key="item.name">{{item.name}}</li>
        </ul>
      </div>
    </template>
  </a-select>
</template>

主要重点在于注释到鼠标的默认点击行为【e.preventDefault()】，因为下拉框中默认点击事件选中该下拉项，所以需要点击多次才能识别到用户自定义的点击事件。