ant design vue select 组件 allowClear 不起作用

最新推荐文章于 2024-03-13 10:41:43 发布

noscallion

最新推荐文章于 2024-03-13 10:41:43 发布

阅读量1.1k

点赞数 1

文章标签： vue.js allowClear a-select

本文链接：https://blog.csdn.net/noscallion/article/details/128098182

版权

本文探讨了在Vue项目中遇到的问题：当为TreeSelect组件设置`allowClear`和`value`属性时，allowClear的清除功能无法正常工作。原因是这两个属性不兼容。解决方法是在`handleChange`方法中监听value的变化，当值为空时，将`courseId`设为null。通过这种方法，可以在保持value属性的同时启用allowClear的清除功能。

摘要由CSDN通过智能技术生成

借鉴 https://blog.csdn.net/agua001/article/details/115631745 这篇博文下的评论。

allowClear 不起作用的原因为 select 组件中 value 属性和 allowClear 属性不可以同时使用。
如果一定要同时使用可以检测 value 的变化

<a-tree-select :value="courseId"
                 allowClear
                 @change="handleChange">

其他属性省略，只看这几个关键的，在下面实现 handleChange 方法。

handleChange(value) {
      if (isEmpty(value)) {                          //判空 这里是一个 lodash 用法，不一定非要这样写，进行判空操作就行
        this.$emit('update:courseId', null)         //赋值为 null，这里是赋值操作，因为我这个是父组件传过来的属性，所以要这样写
      }
    },

核心思想：值变化的时候给一个判断，变化的值是空的时候（也就是点击了 allowClear 的 “x”），重新赋值为 null。