vue 中ant组件allowClear 不生效

ant中select或者 select-tree组件 中如果同时设置了value 和allowClear属性,

那么allowClear会不生效 ,

 

我实际遇到的问题是这样解决的

父组件selectTree,是我封装的用来双向绑定值的 , 如下: 

 

<template>
    
               <selectTree
                
                      v-model="xxx"
                           
              ></selectTree>

</template>

 

子组件中使用ant自带的a-tree-select: 同时设置allowClear 和value属性
 

// 子组件

<template>

 <a-tree-select

    :value="selectValue"

    @change="onChange"

    allowClear
  />
<template>

<script>
  
    export default {
        
      // model 属性相当于 语法糖, 因为父组件用了v-model绑定 ,
       // 这里用change表示触发父组件的change事件修改双向绑定的值
      model: {
        event: 'change'
      },

     data(){

        return {
                selectValue:xxx
            }
     }
    
      method:{
        
   
        onChange(value){

        console.log(value)       // 测试点击清除按钮 , 下拉框value值的变化
    }}

    }

</script>

当我们点击清除按钮时候 , 

 

此时我们观察onChange事件,

会发现此时value值打印出来是undefined,

那我们就直接给onchange事件加判断就可以了

通过触发父组件的方法修改值即可 ,我这里是定义在父组件的change方法 , 手动清空
 

   onChange(value){
      
        if(value为undifined){
    
           this.$emit('change', '')
         }
    }

如果遇到非父子通信

   onChange(value){
      
        if(value为undifined){
    
           this.selectValue = ''
         }
    }