问题描述

动态的循环表单二次编辑：
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组件强制重新渲染


最后重新测试 完美解决