ElementUI下拉框選擇后不顯示值問題及解決

目錄

• ElementUI下拉框選擇后不顯示值
• 解決
• elementUI下拉框value和label問題
• 總結

ElementUI下拉框選擇后不顯示值

• 問題

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

<!--下拉框-->
<el-form-item label="用戶角色" 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>

解決

• 方法一

下拉框數據是循環調用接口，數據層次太多，render函數沒有自動更新，需手動強制刷新

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

• 方法二

vue 無法監聽動態新增的屬性的變化，需要用 $set 來為這些屬性賦值

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

elementUI下拉框value和label問題

使用elementUI中的下拉模板時發現了一個很大的坑，根據文檔所介紹的是：

• key唯一標識
• label選擇之后顯示到選擇框中的值
• value選中之后綁定給模型層的值

<el-select v-model="department.manager" placeholder="請選擇">
?? ?<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>

但跑起來好像并不是這么一回事label并沒有顯示到選擇框中。

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

<el-select v-model="department.manager.username" placeholder="請選擇">
?? ?<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>

這個時候我意識到這和elementUI官網所說的不一致呀。并且提交表單后傳入后臺的數據只有manager.username是正確的 id仍然是回顯的id，沒有實現一個修改的效果，網上也給出了一些解決方法，但都達不到效果。  

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

發現問題出在value綁定到模型層處，綁定對象給模型層的時候一定要加value-key=“id”，最終代碼修改成如下

<el-select v-model="department.manager" placeholder="請選擇" 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>

又了解了一個大坑的解決方式

總結

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