问题描述

在使用vue-design-vue的Select选择器时，常常会遇到一个问题：
我们用 placeholder来进行用户提示，但是在我们进行数据提交之后会发现我们选择的内容仍然存在于选择框内，这其实是不符合我们的业务逻辑的，所以就需要进行提交后的清除。
点击前：

提交后：

在Select的api内有一个参数

可以想象：我用v-model进行双向数据绑定，在提交之后把数据重新赋值为空，这样不就可以清除了嘛。

结果：

好家伙！这直接为空，我的placeholder直接不显示了，到底怎样才能解决这个问题呢？

解决方案

使用选择器：

 <a-select @change="handleChange" placeholder="请选择轨迹类型" v-model="type">
      <a-select-option value="1"> 进</a-select-option>
      <a-select-option value="2"> 出</a-select-option>
 </a-select>

我们在使用的时候只需要加上配置项v-model，主要来控制清除的。

在data里面：

data(){
	return{
		type:undefined,//注意不要使用''空字符串来设定初始值，这样placeholder就不显示了
	}
}

数据提交之后的清除直接改变type的值就行了。

如果选择直接把type的值设置为空：‘’，空串，Select选择器清除内容后为空白，看样子是达到效果了。

但是注意，我们初始页面还知道设置placeholder进行提示操作，现在清除后难道就不需要啦？

空白问题就是我们清除的处理方法不对，设置为空串不是真正意义上的清空：

‘’， 这个串中只有一个元素 就是字符串结束符0

这个时候就需要undefined了：

undefined，一个特殊值，通常用于指示变量尚未赋值

placeholder出现于输入框还未输入内容，空串会占位，而undefined未赋值placeholder就能显示了。

this.type=undefined；//直接把type的值设置为空字符串是没用的，只有赋值为undefined才能实现清除效果

只需要记住，在清空的时候undefined比空串更起作用。

问题解决。

同理：
如果选择器的选项不是自己设置的，是数据驱动的：
在清空的时候也会遇到这样的处理问题，依旧是把值设置为undefined就能解决啦！

这里是飞鱼爱吃米，只授渔，不授鱼！