如果你使用 `v-if` 来渲染
Element UI 表单，可能会出现校验规则
不生效的问题。这是因为当使用 `v-if` 来控制组件的显示和隐藏时，组件会被销毁并重新创建，此时校验规则也会被销毁，导致校验
不生效。
为了解决这个问题，可以使用 `v-show` 来代替 `v-if`，或者在使用 `v-if` 的同时，给表单组件添加 `key` 属性，使其在重新创建时保留校验规则。具体做法如下：
1. 使用 `v-show` 代替 `v-if`：
```html
<template>
<div>
<el-
form ref="
form" :model="
form" label-width="80px">
<el-
form-item label="用户名" prop="username">
<el-input v-model="
form.username"></el-input>
</el-
form-item>
<el-
form-item label="密码" prop="password" >
<el-input type="password" v-model="
form.password"></el-input>
</el-
form-item>
<el-
form-item>
<el-button type="primary" @click="submit
Form">提交</el-button>
</el-
form-item>
</el-
form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
submit
Form() {
this.$refs.
form.validate(valid => {
if (valid) {
console.log('submit success');
} else {
console.log('submit error');
return false;
}
});
}
}
}
</script>
```
2. 使用 `v-if` 并添加 `key` 属性：
```html
<template>
<div>
<el-
form :model="
form" label-width="80px">
<el-
form-item label="用户名" prop="username" :key="key">
<el-input v-model="
form.username"></el-input>
</el-
form-item>
<el-
form-item label="密码" prop="password" :key="key">
<el-input type="password" v-model="
form.password"></el-input>
</el-
form-item>
<el-
form-item>
<el-button type="primary" @click="submit
Form">提交</el-button>
</el-
form-item>
</el-
form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
key: 0
}
},
methods: {
submit
Form() {
this.$refs.
form.validate(valid => {
if (valid) {
console.log('submit success');
} else {
console.log('submit error');
return false;
}
});
}
},
watch: {
// 监听
form 的变化，每次变化都给 key 加 1，使其重新渲染，并保留校验规则
form: {
handler(val) {
this.key += 1
},
deep: true
}
}
}
</script>
```
以上两种方法均可解决校验规则
不生效的问题，具体使用哪一种取决于你的实际需求。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
3045
