1.问题
Ant中使用a-select下拉框时,placeholder设置输入框显示默认值提示,vue2+ant
null与undefined在js中明确的区别:
- null:一个值被定义,定义为“空值”
- undefined:根本不存在定义
2.解决
2.1 a-select使用v-model绑定值
问题代码
<a-form-model-item><a-select v-model="ScoreType" placeholder="请选择" @select="Change"></a-select>
</a-form-model-item>
data(){return{ScoreType: null,}}
v-model绑定的默认值为null,绑定了placeholder,并未显示默认提示,null值默认为空,顶替了placeholder提示。
更改v-model绑定值为undefined
data(){return{ScoreType: undefined,}}
2.2 a-select中使用 :valueAPI(三元判断值为null设定为undefined)
<a-form-model-item><a-select :valse="ScoreType ? ScoreType : undefined" placeholder="请选择" @select="Change"></a-select>
</a-form-model-item>
data(){return{ScoreType: undefined,}}
3.总结
在Vue2使用AntDesign的a-select组件时,若要显示默认提示,需注意v-model的初始值。当绑定值设为undefined,placeholder才会显示。使用AntDesign的a-select组件时value属性结合三元运算符处理。