vue3 使用 Element-plus 的 el-pagination 分页组件显示中文
vue3 使用 Element-plus 的 el-pagination 分页组件时无法显示中文
问题
使用element-puls 的分页组件时,显示的是英文。
这是因为Element Plus components 默认使用英文。
解决方法
官方文档提供两种使用中文的方法:进入文档国际化 | Element Plus.
使用全局配置项
官方文档上的是整体加载element-plus 时使用中文的方法,下面是按需加载的代码
// element.js
import { ElButton, ElForm, ElFormItem } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import { use as localeUse } from 'element-plus/lib/locale'
export default (app) => {
localeUse(lang)
app.use(ElButton).use(ElForm).use(ElFormItem)
}
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
const app = createApp(App)
installElementPlus(app)
app.use(router).mount('#app')
使用 ConfigProvider 组件(建议)
可以使用 ConfigProvider 组件包裹App 组件(这个组件也可以使用在其他单独的页面上),参考文档用法就可以
// App.vue
<template>
<el-config-provider :locale="locale">
<router-view></router-view>
</el-config-provider>
</template>
<script>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
export default {
name: 'App',
components: {
ElConfigProvider
},
setup() {
return {
locale: zhCn
}
}
}
</script>
语言切换成功
————————————————
版权声明:本文为CSDN博主「来杯卡布奇洛」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lan123456_/article/details/120992462
更多推荐
所有评论(0)