给el-form-item,添加key的场景

v-if控制dom显示隐藏,dom的校验提示语还会显示，导致校验异常

1.公用同一个表单;

2.选择不同的账号类型,下面对应的表单项不同,但存在公用同一个字段的情况;

3.在切换另一个账号类型,点击确认,校验内容具有文字提示;

4.在账号对应input中输入内容,仍提示请输入账号字样;没走到校验里面(拿不到输入的内容);

 

原因

v-if在操作dom的时候，在根节点进行的删减，而element在封装的时候没考虑这块，导致rules判断的时候，无法取到v-if添加进来的prop值;

解决方法

在 el-form-item 中添加一个属性key，key的值是唯一的（一般key和prop写一样的内容即可，因为rules里面的东西不能重复定义，所以肯定是唯一的。）

简单赘述

         <el-form-item
            prop="accountName"
            key="accountName"
            label="账号"
            :rules="[
              { required: true, message: '请输入账号', trigger: 'blur' },
              { trigger: 'blur', validator: validateAccount },
            ]"
          >
            <el-input
              v-model.trim="CurObject.accountName"
              placeholder="请输入账号"
              name="accountName"
              type="text"
              tabindex="1"
              autocomplete="on"
              clearable
            />
          </el-form-item>

另外需要注意的是,在切换账号类型的时候(建议使用watch事件);

1.先将表单对应的字段值,进行置空(存在字段公用的情况,避免值,缓存);

2.调用表单提供的 this.$forceUpdate();

3. this.resetForm('ruleForm'),清除上一次的校验;