项目场景:
通过事件打开弹窗,点击选中的数据将数据更新到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()"