解决两个表单切换时验证规则不生效问题

• 需求：页面先展示不可编辑状态的表单信息，点击编辑按钮，表单信息变为可编辑状态，编辑的内容需要通过验证规则。
• 思路：写两个表单，绑定不同的数据，第一个表单用于展示，没有验证规则，第二个表单有验证规则，通过v-if切换
• 问题：第二个表单的验证规则不生效
• 解决办法：给两个表单分别加key值。
• 问题本质：即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。

具体代码如下：

<div
    v-if="editBtnClick === false"
    class="fromContainer">
    <el-form
        key="AddCandidateFrom"
        label-position="right"
        :model="AddCandidateFrom"
        label-width="110px">
        <el-row>
            <el-col :span="10">
                <el-form-item
                    label="姓名">
                    {{ AddCandidateFrom.user_name }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item
                    label="应聘岗位">
                    {{AddCandidateFrom.apply_position}}
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</div>
<div
    v-if="editBtnClick === true"
    class="fromContainer">
    <el-form
        key="EditCandidateFrom"
        label-position="right"
        :model="EditCandidateFrom"
        :rules="rules"
        ref="EditCandidateFrom"
        label-width="110px">
        <el-row>
            <el-col :span="10">
                <el-form-item
                    label="姓名"
                    prop="user_name"
                    >
                    <el-input
                        v-model="EditCandidateFrom.user_name"
                        class="selectItem">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item
                    label="应聘岗位"
                    prop="apply_position">
                    <el-select
                        v-model="EditCandidateFrom.apply_position"
                        filterable
                        remote
                        clearable
                        placeholder="请选择应聘岗位"
                        @clear="handleClearOption('job')"
                        :remote-method="getRemoteJob"
                        :loading="jobLoading"
                        class="selectItem">
                        <el-option
                            v-for="item in jobOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</div>