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 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>
    

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

总结

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

• 解决element ui select下拉框不回显数据问题的解决
• 解决Element中el-date-picker组件不回填的情况
• 关于element-ui select 下拉框位置错乱问题解决

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！