ant vue a-select中placeholder无效
a-select中placeholder设置无效的解决办法(两种情况)。
最近使用ant vue中的a-select,我发现设置placeholder在下拉框中不起效,我看了官方的例子,发现官方例子中placeholder没有配合label-in-value属性去使用。
官方实列
参数:| labelInValue |
说明:| 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes} 的格式 |
类型:| boolean |
默认值:| false |
方法1
<a-select placeholder="请选择功能类型"
v-model="submitObj.operation"
@change="typeChange">
<a-select-option v-for="(item, index) in operTypeArr"
:key="index"
:value="item.dict_entry">{{item.dict_value}}</a-select-option>
</a-select>
// 重置表单或初始表单的时候这里的operation也要设置成undefined(placeholder方可起效果)
submitObj: {
operation: undefined,
name: '',
note_explain: ''
}
方法2
// template标签中
<a-form-item label="xxx名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }" >
<!--querypeopleList.label ? querypeopleList : undefined 这句话可以解决placeholder失效-->
<!--此处不用v-model,若想使用可通过计算属性的get和set实现下-->
<a-select :disabled="postDisabled" placeholder="请选择xxx" :value="querypeopleList.label ? querypeopleList : undefined" label-in-value @change="PostidChange">
<a-select-option v-for="(item,index) in queryPostData" :key="index" :value="item.id">
{{item.realname}}
</a-select-option>
</a-select>
</a-form-item>
// data函数中
data(){
return{
querypeopleList:{
key:'',
label:''
},
}
}
//methods方法中
methods:{
PostidChange(value){
let val = value.label.trim()
this.querypeople.leaderusername=val //xxx名
this.querypeople.leaderuser=value.key.toString()//xxxid
//加入label-in-value属性后,value(v-model)值为对象{key: '',label: ''},每次给value绑定的对象赋值才可回显渲染到dom中。
this.querypeopleList={
key:this.querypeople.leaderuser,
label:this.querypeople.leaderusername
}
},
}