- 需求:页面先展示不可编辑状态的表单信息,点击编辑按钮,表单信息变为可编辑状态,编辑的内容需要通过验证规则。
- 思路:写两个表单,绑定不同的数据,第一个表单用于展示,没有验证规则,第二个表单有验证规则,通过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>