欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-select 數據回顯,只顯示value不顯示lable問題

 更新時間：2022年09月02日 09:46:32   作者：Fashion_Barry  
這篇文章主要介紹了el-select 數據回顯,只顯示value不顯示lable問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

el-select數據回顯,只顯示value不顯示lable

 點擊actions，把當前VIPGrade ID傳過去

 這個時候我們可以看到，select List是有數據的，但是為什么只顯示value，并沒有顯示label呢？

 這個時候我們打印一下，從主頁面?zhèn)魅氲?id 是什么類型，再看一下我們的 list 里面的id是什么類型

 通過控制臺我們可以看到，主頁面?zhèn)魅氲膇d 是String類型的，而我們 list 的 VIPGraded 是Number類型的，看到這里我們就知道原因了；

 我們在數據回顯 重置的我們 VIPGradeID 的時候，把類型轉換一個即可 再看效果圖

此時我們已經看到，數據回顯時，就可以綁定上對應的 ID 值，并且顯示對應的Label 值；

在處理el-select數據回顯時遇到的問題

在開發(fā)vue項目的時候，會普遍的用到elementUI組件庫，當用道其中的下拉框組件時，會遇到一點兒問題。先看如下代碼：

<el-select v-model='regin'>
?? ??? ?<el-option
?? ??? ?v-for="item in option"
?? ??? ?:key="item.value"
?? ??? ?:label="item.label"
?? ??? ?:value="item.value"
?? ??? ?></el-option>
</el-select>
data(){
?? ??? ?return{
?? ??? ??? ??? ?option:[
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ?value:'1'，
?? ??? ??? ??? ??? ??? ??? ??? ?label:'選項1'
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ?value:'2'，
?? ??? ??? ??? ??? ??? ??? ??? ?label:'選項2'
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ?value:'3'，
?? ??? ??? ??? ??? ??? ??? ??? ?label:'選項3'
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?],
?? ??? ??? ??? ?regin:''
?? ??? ?}
}

而v-model綁定的regin值實際上時選中選項的id值。

那么在處理數據會顯得時候，往往要根據后臺返回的id值來默認選中某選項。代碼如下：

this.regin = res.data.condition
//condition 后臺返回數據 值為數值1
//conditionName 選項1

這樣寫的后果是select會直接回顯一個1

如果想要select顯示“選項1”，

this.regin = String(res.data.condition)

就要這樣寫才可以；

原因是你賦給this.regin的值的類型要與rejin綁定的值的類型一樣，才會回顯成功。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論