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
}
},
}