1、问题重现:

<a-select
 class="keyWord"
  :value="businessObj.item.value"
  @change="businessHandleChange"
  placeholder="请选择"
  :allowClear='true'
>

文档中说明allowClear默认值为false,文档地址:https://www.antdv.com/components/select-cn/
效果图:
在这里插入图片描述
清空按钮出现了,但是点击的时候没有效果,不清空也不报错。(element-ui就没问题)

2、查资料经常看到大佬们的一句话:

antd Select组件的allowClear点击失效 无法清空? 观察发现,由于同时设置了value属性和allowClear属性, 导致无法点击清空按钮清空当前选中项,官方相应的文档并没有提供allowClear点击事件让我们订制自己的事件,因此,解决办法是去除value或者获取到清空按钮的dom元素,增加点击事件.

3、我选择了获取清空按钮的dom元素

1)定义鼠标移入事件,获取到元素

<a-select
 class="keyWord"
  :value="businessObj.item.value"
  @change="businessHandleChange"
  placeholder="请选择"
  :allowClear='true'
  @mouseenter="handleClear"
>

// 鼠标移入获取清空按钮
handleClear(e) {
  console.log(e)
},

2)打印出来的图:
在这里插入图片描述
3)首先在控制台操作鼠标移入看到到清空按钮的元素,如图:
在这里插入图片描述

4)在打印的e事件中一层一层去找到清空按钮元素,最后位置在:e.path[0].children[0].children[1]

4、最终代码:

// 鼠标移入获取清空按钮
handleClear(e) {
  // 获取到dom元素
  let clearDom = e.path[0].children[0].children[1]
  // 添加点击事件
  clearDom.addEventListener( "click", () => {
    // 清空操作
    this.businessObj.item = {}
  })
},

坑,挖不完,填不完,哈哈哈

Logo

前往低代码交流专区

更多推荐