element-ui之解决select无法回显的问题

更新时间：2023年04月05日 17:10:04 作者：前端小问题

这篇文章主要介绍了element-ui之解决select无法回显的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

element-ui解决select无法回显

问题描述

给的是value的值，没有正常显示lable中的值，是因为当select中只赋值了value没有赋值lable的值时，系统会默认将value和lable共用。

我们在绑定数值时value=“1” 是绑定的字符串，所以下面重新将value 赋值为2，同时lable也默认成2，就显示了2.

方法：使用**：value=“1”**就可以回显。

<el-select v-model="moreForm.isVip" placeholder="奖励会员" style="width:100%">
            <el-option label="普通会员" value="0"></el-option>
            <el-option label="vip" value="1"></el-option>
            <el-option label="vvip" value="2"></el-option>
          </el-select>

getUserInfor(row) {
       this.moreForm.isVip = row.isVip;
    },

解决方法

<el-select v-model="moreForm.isVip" placeholder="奖励会员" style="width:100%">
            <el-option label="普通会员" :value="0"></el-option>
            <el-option label="vip" :value="1"></el-option>
            <el-option label="vvip" :value="2"></el-option>
          </el-select>

element-ui多个select回显成功，但是选中无反应

在使用el-select 组件出现一个小问题，对成功回显后的数据，再次进行添加，选框中没有更新，但是提交表单，实际数据是更新的。怀疑可能是视图层没有更新，组件化框架类似问题。

原因下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新

解决方案

添加 @change="$forceUpdate()" 强制更新视图

<el-select v-model="form.roleIds" multiple placeholder="请选择" @change="$forceUpdate()">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>

总结

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

您可能感兴趣的文章:

vue-router4动态路由刷新404/白屏的解决
本文主要介绍了vue-router4动态路由刷新404/白屏的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue实现一个矩形标记区域(rectangle marker)的方法
这篇文章主要介绍了vue实现一个矩形标记区域 rectangle marker的方法，帮助大家实现区域标记功能，感兴趣的朋友可以了解下
2020-10-10
vue组件中使用props传递数据的实例详解
这篇文章主要介绍了vue组件中使用props传递数据的实例详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-04-04
Vue computed计算属性的使用方法
这篇文章主要为大家详细介绍了Vue computed计算属性的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue中v-for 循环对象中的属性
这篇文章主要介绍了 vue中v-for 循环对象中的属性，文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助
2021-11-11
vue移动端项目vant组件库之tag详解
这篇文章主要介绍了vue移动端项目vant组件库之tag详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）
这篇文章主要给大家介绍了关于vue.js内部自定义指令与全局自定义指令的实现方法，vue.js中实现自定义指令的主要是利用directive，directive这个单词是我们写自定义指令的关键字，需要的朋友们下面跟着小编来一起学习学习吧。
2017-07-07
vue传值方式的十二种方法总结
这篇文章主要介绍了vue传值方式的十二种方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
Vue 如何追踪数据变化
这篇文章主要介绍了Vue 如何追踪数据变化，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04
vue的diff算法知识点总结
本篇文章给大家分享了关于vue的diff算法的相关知识点总结，有兴趣的朋友参考学习下。
2018-03-03