ant-design vue 中Select组件allowClear点击没起作用
1、问题重现:<a-selectclass="keyWord":value="businessObj.item.value"@change="businessHandleChange"placeholder="请选择":allowClear='true'>文档中说明allowClear默认值为false,文档地址:https://www.antdv.com/components/sel
·
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 = {}
})
},
坑,挖不完,填不完,哈哈哈
更多推荐
已为社区贡献35条内容
所有评论(0)