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中使用自定义指令实现按钮权限展示功能，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-04-04
本文主要介绍了Vue中接收二进制文件流实现pdf预览的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能满足要求。这篇文章主要介绍了vue.js多页面开发环境搭建 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue实现JSON字符串格式化编辑器组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
vue在线预览word、excel、pdf、txt、图片的方法实例
最近工作中遇到了一个需要在线预览文件的需求,所以这篇文章主要给大家介绍了vue在线预览word、excel、pdf、txt、图片的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue接入ts基本方法，关于ts，也出了很久，下面我们就来简单学习了下ts并且在原有项目上接入基本ts语法，也算是一个初级尝试，简单梳理下基础的接入配置和已经遇到的问题，供需要的小伙伴们参考2022-01-01
vue-router 按需加载 component: () => import() 报错的解决
这篇文章主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue-cli3 取消eslint校验代码的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等，我们需要转化展示成能看的懂得时间格式,下面这篇文章主要给大家介绍了关于vue时间格式总结以及转换方法的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现前端列表多条件筛选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
最新评论