快捷導(dǎo)航

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

更新時間：2023年02月23日 10:51:55 作者：讓丄帝愛伱

這篇文章主要介紹了ElementUI下拉框選擇后不顯示值問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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>

解決

方法一

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

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

方法二

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

// 操作下拉框選中事件
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問題

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

key唯一標(biāo)識
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 style="float: left">{{ item.username }}</span>
?? ? ? ?<span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
? ??? ?</el-option>
</el-select>

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

然后我又微調(diào)了一下代碼將v-model中的值修改了回顯問題解決了，但是選擇后的顯示問題依舊，我猜測和value有關(guān)。將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 style="float: left">{{ item.username }}</span>
?? ? ? ?<span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
? ??? ?</el-option>
</el-select>

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

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

發(fā)現(xiàn)問題出在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 style="float: left">{{ item.username }}</span>
? ? ?<span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
? ?</el-option>
</el-select>

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