ant-design vue 中Select组件allowClear点击没起作用

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 = {}
  })
},

坑，挖不完，填不完，哈哈哈