问题描述
动态的循环表单二次编辑：
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组件强制重新渲染
最后重新测试 完美解决
