数据无法回显,数据不能实时更新例如:elementui select 更改选中值后,无法渲染到页面中?输入框查询数据之后无法渲染到页面

项目场景:

通过事件打开弹窗,点击选中的数据将数据更新到input输入框内,添加到输入框之后可以修改数据例如CRUD的操作


问题描述

问题一:事件弹窗的引用事件方法

问题二:点击选中的数据无法实时更新到输入框内

问题三:需要点击其它按钮input输入框才会更新,无法做到实时更新

问题四:下拉框的数据通过for循环遍历出来的数据无法做到实时更新


原因分析:

问题一分析: 方法有很多种可以在菜鸟和csdn上都能找到,也许是格式不正确,漏写了某个字段

问题二分析: 方法绑定的数组内的属性可能没对上,代码少写漏写,没有添加实时更新的代码

问题三分析:很问题二基本类似


解决方案:

解决方案1:我这里是试过几个有的格式不对最后使用的:@keyup.enter.native=" "实现的,该事件是回车事件引号内存放绑定的区域内

<el-table-column label="注册名称" show-overflow-tooltip width="170">
										<template slot-scope="scope">
											<el-form-item :prop="'addForm.'+scope.$index+'.regName'" :addFormRules="addFormRules.regName" class="all">
												<el-input @keyup.enter.native="dialogVisible = true" v-model="scope.row.regName" placeholder="请输入"
												 clearable @focus="$refs.baseForm.clearValidate(`addForm.${scope.$index}.regName`)"></el-input>
											</el-form-item>
										</template>
									</el-table-column>

解决问题二: 数据回显首先看data内定义的是数组还是普通的串如果你定义的是数组,切记!!写交互时候要注意接收发送的格式要为数组,例如:

 接下来就是数据不正常显示的问题了,这个问题其实就是数据没有实时更新的问题,我在网上搜到的方法有很多种.我个人使用的是v-if 和this.baseForm.addForm.JSON.parse(JSON.stringify(this.baseForm.addForm));

这里的update:true是v-if的在data定义之后在事件作用区加上以下代码 就可以实现实时刷新

 https://blog.csdn.net/Shuang_gege/article/details/124847498

element的el-table中el-input不更新的问题_余白x的博客-CSDN博客_element input数据不更新

 这是方法连接

解决问题四:

下拉框数据不及时刷新只需要在select语句加上一句代码即可

 @visible-change="$forceUpdate()"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值