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

lowers_1

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

阅读量1.9k

点赞数

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

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

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

版权

vue+antd 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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()】，因为下拉框中默认点击事件选中该下拉项，所以需要点击多次才能识别到用户自定义的点击事件。