这篇文章主要讲解了“在ElementUI中因为关联对象给模型层没有给value-key赋值，导致下拉框点选后看不到值”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

目录

• 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 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中因为关联对象给模型层没有给value-key赋值，导致下拉框点选后看不到值”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue3中setup、ref和reactive的基本用法是什么

  本文给大家介绍vue3组合API中setup、 ref、reactive的用法，初步了解reactive的使用及具体用法，通过示例代码给大家介绍的非常详细，需要的朋友参考下吧

• events事件模块是什么，怎么理解

  本篇文章带大家了解一下Node.js模块中的events模块，介绍一下什么是事件驱动、NodeJS的事件架构、Events模块核心API等，希望对大家有所帮助！

• Node.js中eventloop事件循环有何用，怎样实现

  主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。下面本篇文章就来带大家掌握Node.js中的eventloop，希望对大家有所帮助！

• Node.js单线程怎样实现高并发，具体操作是什么

  这篇文章主要介绍了Nodejs单线程实现高并发原理，对Node.js感兴趣的同学，可以参考下

• 用JS实现反转数组的方法有什么，区别在哪

  反转方法：1、利用for循环和push()，语法“var nar=[];for(var i=arr.length-1;i>=0;i--){nar.push(arr[i])}”；2、利用reverse()，语法“arr.reverse()”。