没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
问题描述: 在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中。(踩坑踩得莫名其妙) 代码段: <el v-model=value placeholder=请选择 change=change()> <el v-for=item key=item.value label=item.label value=item.value></el> </el>
资源推荐
资源详情
资源评论
解决解决element-ui的下拉框有值却无法选中的情况的下拉框有值却无法选中的情况
问题描述:问题描述:
在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,
但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中。(踩坑踩得莫名其妙)
代码段:代码段:
<el-select v-model="value" placeholder="请选择" @change="change()">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
解决方法:解决方法:
出现这个问题好像是因为下拉框数据是循环掉别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷
新所以我直接强制刷新了值,而forceUpdate就是重新render。
写一个方法,在select的change事件中调用此方法,运用 this.$forceUpdate()强制刷新,页面正常选值。
change(){
this.$forceUpdate()
},
小结:小结:
同理,forceUpdate()这个方法也适用一些很深的组件 state 已经改变了的时候,可以在该组件上面调用,解决页面v-for中修改
item属性值后页面页面值不改变的问题。
补充知识:补充知识:解决解决element ui select多选下拉框,在编辑表单记录时没有回显数据,默认选中的问题多选下拉框,在编辑表单记录时没有回显数据,默认选中的问题
前端使用vue,项目中使用的是element ui组件,在使用select下拉框多选时,新增记录时select多选下拉框正常使用,没问
题。但是在编辑记录时,编辑界面也为select下拉框赋值了,却没有显示数据。
先放一个select多选下拉框编辑时正确的加载数据的显示效果图:
下拉框代码如下:
资源评论
weixin_38624746
- 粉丝: 3
- 资源: 946
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功