脚本宝典收集整理的这篇文章主要介绍了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中的下拉模板时发现了一个很大的坑，根据文档所介绍的是：
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 style="float: left">{{ item.username }}</span>
<span style="float: right; color: #8492a6; font-Size: 13px">{{ 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 style="float: left">{{ item.username }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ 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 style="float: left">{{ item.username }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
</el-option>
</el-select>又了解了一个大坑的解决方式
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的ElementUI下拉框选择后不显示值问题及解决全部内容，希望文章能够帮你解决ElementUI下拉框选择后不显示值问题及解决所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。