问题描述

动态的循环表单二次编辑：
BUG1 如图 用户打开条件弹窗(数据来自父组件),渲染表单之后,选择下拉框内容,不回显, 此BUG只有在用户保存过条件后 第二次从父组件取值时二次编辑时才会触发.

BUG2 通过数据强制渲染后(具体方法见解决方案) 可以修复BUG1 ,但会触发另一个检验不通过问题, 观察data数据确实有值,校验不通过,无法保存

解决方案：

思路:用户操作之后.data中确实已经变换,但是层级很深,考虑是vue没有监听到,所以没有动态渲染,考虑$set方法

BUG1 很常见的数据变更页面未渲染,想到是用$set赋值,便于vue监听,找到页面中选中值得代码区域
找到对应下拉框,通过@change时间调用$set方法赋值
(但我的表单是循环出来的,除了拿到对应的选中值,还需要索引,此方法不通)
上网查询,有很多类似案例,原理一样 在@change事件中强制刷新
this.$forceUpdate()

// 切换强制刷新数据updateForm() {this.$forceUpdate()},

 <el-form-item v-if="form[index].preParam.paramType==1":prop="`conditionList.${index}.paramObj.identifier`" :rules="rules.equipmentParameters" :key="index+'equipmentParameters'"><el-select size="mini" style="width:150px" v-model="conditionForm.conditionList[index].paramObj" value-key="identifier" placeholder="请选择属性" filterable@change="updateForm"><el-option v-for="item in equipmentParametersList" :key="item.identifier" :label="item.identiName" :value="item">el-option>el-select>el-form-item>

BUG2 产生的原因未知,经过强制刷新后的data中数据已经是最新的但就是检验不通过,(我推测是校验发生在数据更替之前)
开始的思路,是想用户操作过程中不加校验,最后报错的时候再加校验,方案可行,但又其他的BUG,所以还是另寻他法.
想到之前也有个校验的问题,是通过加key值解决的,elementUI很多缺陷可以通过神奇的key解决.
我给我的表单加上动态key

用户每次触发数据更新后 修改key,从而使form组件强制重新渲染


最后重新测试 完美解决

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！