目錄

• ElementUI下拉框選擇后不顯示值
• 解決
• elementUI下拉框value和label問(wèn)題
• 總結(jié)

ElementUI下拉框選擇后不顯示值

• 問(wèn)題

vue(ElementUI)下拉框選擇后賦值了，但是框上不顯示

<!--下拉框-->
<el-form-item label="用戶(hù)角色" prop="role">
? ?<el-select v-model="editModel.role" :placeholder="selectPlaceholder" @change="handleChange">
? ? ? <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
? ? ? </el-option>
? ?</el-select>
</el-form-item>

解決

• 方法一

下拉框數(shù)據(jù)是循環(huán)調(diào)用接口，數(shù)據(jù)層次太多，render函數(shù)沒(méi)有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新

// 手動(dòng)刷新
handleChange() {
? ? this.$forceUpdate()
}

• 方法二

vue 無(wú)法監(jiān)聽(tīng)動(dòng)態(tài)新增的屬性的變化，需要用 $set 來(lái)為這些屬性賦值

// 操作下拉框選中事件
handleChange(val) {
? // val 代表 value 值
? if (val) {
? ? // 操作選中角色發(fā)生變化
? ? this.$set(this.editModel, this.editModel.role, val)
? } else {
? ? this.$set(this.editModel, this.editModel.role, "")
? }
}

elementUI下拉框value和label問(wèn)題

使用elementUI中的下拉模板時(shí)發(fā)現(xiàn)了一個(gè)很大的坑，根據(jù)文檔所介紹的是：

• key唯一標(biāo)識(shí)
• label選擇之后顯示到選擇框中的值
• value選中之后綁定給模型層的值

<el-select v-model="department.manager" placeholder="請(qǐng)選擇">
?? ?<el-option
? ? ?? ?v-for="item in employees"
?? ? ? ?:key="item.id"
?? ? ? ?:label="item.username"
?? ? ? ?:value="item">
?? ? ? ?<span>{{ item.username }}</span>
?? ? ? ?<span>{{ item.email }}</span>
? ??? ?</el-option>
</el-select>

但跑起來(lái)好像并不是這么一回事label并沒(méi)有顯示到選擇框中。

然后我又微調(diào)了一下代碼 將v-model中的值修改了回顯問(wèn)題解決了，但是選擇后的顯示問(wèn)題依舊，我猜測(cè)和value有關(guān)。將value中的值修改成:value=“item.username”，選擇和回顯問(wèn)題就解決了

<el-select v-model="department.manager.username" placeholder="請(qǐng)選擇">
?? ?<el-option
? ? ?? ?v-for="item in employees"
?? ? ? ?:key="item.id"
?? ? ? ?:label="item.username"
?? ? ? ?:value="item.username">
?? ? ? ?<span>{{ item.username }}</span>
?? ? ? ?<span>{{ item.email }}</span>
? ??? ?</el-option>
</el-select>

這個(gè)時(shí)候我意識(shí)到這和elementUI官網(wǎng)所說(shuō)的不一致呀。并且提交表單后傳入后臺(tái)的數(shù)據(jù)只有manager.username是正確的 id仍然是回顯的id，沒(méi)有實(shí)現(xiàn)一個(gè)修改的效果，網(wǎng)上也給出了一些解決方法，但都達(dá)不到效果。  

苦思冥想之后（其實(shí)就是百度了又百度之后）。

發(fā)現(xiàn)問(wèn)題出在value綁定到模型層處，綁定對(duì)象給模型層的時(shí)候一定要加value-key=“id”，最終代碼修改成如下

<el-select v-model="department.manager" placeholder="請(qǐng)選擇" value-key="id">
? ?<el-option
? ? ? ?v-for="item in employees"
? ? ? ?:key="item.id"
? ? ? ?:label="item.username"
? ? ? ?:value="item">
? ? ?<span>{{ item.username }}</span>
? ? ?<span>{{ item.email }}</span>
? ?</el-option>
</el-select>

又了解了一個(gè)大坑的解決方式

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持。