el-动态表单的校验不触发/只触发了部分项

参考：

1. 深入了解Element Form表单动态验证问题 转载
2. vue elementUI组件表单动态验证失效的问题与解决办法

在别人的代码上开发新功能时，发现动态表单的校验功能突然出现问题：

重构前,只有两步，通过type来判断当前显示内容
<el-form>
<div v-if="type">  第一步
<el-form-item></el-form-item>
...
<div>
<div v-if="type == false"> 第二步
<div>
<el-form-item></el-form-item>
...
</div>
...
<div>
</el-form>

重构后，有4步
<el-form>
<div v-if="step === 1">  第一步
<el-form-item></el-form-item>
...
<div>
<div v-if="step === 2"> 第二步
<el-form-item></el-form-item>
...
<div>
<div v-if="step === 3"> 第3步
<el-form-item></el-form-item>
...
<div>
<div v-if="step === 4"> 第4步
<el-form-item></el-form-item>
...
<div>
</el-form>

在测试时发现，第一步校验没有问题，一旦进入第二步，就只触发了部分一个或者两个校验。
通过对比重构前的代码，发现和之前的一样，在el-form-item外套一层div就可以了

<el-form>
<div v-if="step === 1">  第一步
<el-form-item></el-form-item>
...
<div>
<div v-if="step === 2"> 第二步
<div>
<el-form-item></el-form-item>
...
</div>
<div>

想知道发生了什么导致这种情况，于是去看el-form的源码，发现校验的触发数量，与其属性fields有关系，如图
左边元素有6个， 而右边fields只有1个

所以在触发校验时，只有一个，如下

那么现在的问题就是：fields的数据是如何变化的？在源码中找到如下位置，根据子组件的创建销毁来修改fields
el-form:

el-form-item:

到了这里，多半就可以确定的是元素更新的问题了，在el-form-item外套一层div，进入第二步后元素布局就与第一步不同，从而刷新了所有元素。进而fields中的数据也就齐全了。

后面我又试了下，如果给第一步的el-form-item套div，第二步不套也可以解决。
但是，如果同时套上div，那么相对来说el-form中el-form-item的结构就没有发生变化，就产生了同样的问题，因此套div的方式并不可取。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key

现在的方法是：给每个v-if设置key

<el-form>
<div v-if="step === 1" key="1">  第一步
<el-form-item></el-form-item>
...
<div>
<div v-if="step === 2" key="2"> 第二步
<el-form-item></el-form-item>
...
<div>
<div v-if="step === 3" key="3"> 第3步
<el-form-item></el-form-item>
...
<div>
<div v-if="step === 4" key="4"> 第4步
<el-form-item></el-form-item>
...
<div>
</el-form>

原文地址：https://blog.csdn.net/weixin_45286211/article/details/142876624

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！