ElementUI下拉框选择后不显示值问题及解决

品茗观蛤蟆

ElementUI下拉框选择后不显示值

• 问题
  

vue(ElementUI)下拉框选择后赋值了，但是框上不显示

1. <!--下拉框-->
   
2. <el-form-item label="用户角色" prop="role">
   
3.    <el-select v-model="editModel.role" :placeholder="selectPlaceholder" @change="handleChange">
   
4.       <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
   
5.       </el-option>
   
6.    </el-select>
   
7. </el-form-item>

复制代码

解决

• 方法一
  

下拉框数据是循环调用接口，数据层次太多，render函数没有自动更新，需手动强制刷新

1. // 手动刷新
   
2. handleChange() {
   
3.     this.$forceUpdate()
   
4. }

复制代码

• 方法二
  

vue 无法监听动态新增的属性的变化，需要用 $set 来为这些属性赋值

1. // 操作下拉框选中事件
   
2. handleChange(val) {
   
3.   // val 代表 value 值
   
4.   if (val) {
   
5.     // 操作选中角色发生变化
   
6.     this.$set(this.editModel, this.editModel.role, val)
   
7.   } else {
   
8.     this.$set(this.editModel, this.editModel.role, '')
   
9.   }
   
10. }

复制代码

elementUI下拉框value和label问题

使用elementUI中的下拉模板时发现了一个很大的坑，根据文档所介绍的是：

• 1. key

  复制代码
  唯一标识
  
• 1. label

  复制代码
  选择之后显示到选择框中的值
  
• 1. value

  复制代码
  选中之后绑定给模型层的值
  

1. <el-select v-model="department.manager" placeholder="请选择">
   
2.     <el-option
   
3.         v-for="item in employees"
   
4.         :key="item.id"
   
5.         :label="item.username"
   
6.         :value="item">
   
7.         <span style="float: left">{{ item.username }}</span>
   
8.         <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
   
9.        </el-option>
   
10. </el-select>

复制代码

但跑起来好像并不是这么一回事label并没有显示到选择框中。
然后我又微调了一下代码 将v-model中的值修改了回显问题解决了，但是选择后的显示问题依旧，我猜测和value有关。将value中的值修改成:value=“item.username”，选择和回显问题就解决了

1. <el-select v-model="department.manager.username" placeholder="请选择">
   
2.     <el-option
   
3.         v-for="item in employees"
   
4.         :key="item.id"
   
5.         :label="item.username"
   
6.         :value="item.username">
   
7.         <span style="float: left">{{ item.username }}</span>
   
8.         <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
   
9.        </el-option>
   
10. </el-select>

复制代码

这个时候我意识到这和elementUI官网所说的不一致呀。并且提交表单后传入后台的数据只有manager.username是正确的 id仍然是回显的id，没有实现一个修改的效果，网上也给出了一些解决方法，但都达不到效果。  
苦思冥想之后（其实就是百度了又百度之后）。
发现问题出在value绑定到模型层处，绑定对象给模型层的时候一定要加value-key=“id”，最终代码修改成如下

1. <el-select v-model="department.manager" placeholder="请选择" value-key="id">
   
2.    <el-option
   
3.        v-for="item in employees"
   
4.        :key="item.id"
   
5.        :label="item.username"
   
6.        :value="item">
   
7.      <span style="float: left">{{ item.username }}</span>
   
8.      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
   
9.    </el-option>
   
10. </el-select>

复制代码

又了解了一个大坑的解决方式

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/article/276242.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！