element ui 语言切换 表单错误提示不更新切换
时间: 2023-07-26 17:34:34 浏览: 62
对于 Element UI 的语言切换,你可以通过以下方法来更新表单错误提示:
1. 在切换语言时,需要重新加载 Element UI 的语言包,可以使用 Element UI 提供的 `locale.use()` 方法来实现:
```
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale'
// 加载中文语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
// 加载英文语言包
import enLocale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI)
// 切换到中文语言包
locale.use(zhLocale)
// 切换到英文语言包
locale.use(enLocale)
```
2. 在表单中使用 `el-form` 组件并绑定 `model` 属性,可以通过在 `watch` 中监听 `model` 的变化来实现表单错误提示的更新,如下所示:
```
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="Input">
<el-input v-model="form.input"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
input: ''
},
rules: {
input: [
{ required: true, message: 'Please input something', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log('submit success')
} else {
console.log('submit fail')
}
})
}
},
watch: {
// 监听表单 model 的变化
form: {
deep: true,
handler(val) {
// 动态更新表单验证规则
this.$refs.form.clearValidate()
this.$nextTick(() => {
this.$refs.form.validate()
})
}
}
}
}
</script>
```
通过以上方法,可以实现 Element UI 语言切换时表单错误提示的更新。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)