使用element-plus的el-pagination分页组件的时候怎么换中文?

element里面的分页是英文版的,但是项目需求是要中文的,可以用el-config-provider(切换系统语言)全局的配置选项,有locale属性,用来切换语言包

做法如下:

在main.js引入对应的包,代码如下:

复制代码
 1 import 'normalize.css/normalize.css'
 2 import ElementPlus from 'element-plus'
 3 import 'element-plus/dist/index.css'
 4 import '@/assets/style/public.less'
 5 //引入element-plus中文包
 6 import locale from 'element-plus/lib/locale/lang/zh-cn' 
 7 import { createApp } from 'vue'
 8 import { createPinia } from 'pinia'
 9 import App from './App.vue'
10 import router from './router'
11 
12 const app = createApp(App)
13 app.use(ElementPlus)
14 app.use(locale)
15 app.use(createPinia())
16 app.use(router)
17 app.mount('#app')
复制代码

在用到分页的页面:

复制代码
 1 //中文包
 2 import zhCn from "element-plus/lib/locale/lang/zh-cn";
 3 
 4 let locale = zhCn;
 5
 6 
 7 <!--分页查询-->
 8 <div class="demo-pagination-block">
 9     <el-config-provider :locale="locale">
10       <!--切换语言包为中文包-->
11          <el-pagination
12             v-model:current-page="currentPage"
13             v-model:page-size="pageSize"
14             :page-sizes="[100, 200, 300, 400]"
15             :small="true"
16             layout="total, sizes, prev, pager, next, jumper"
17             :total="400"
18             @size-change="handleSizeChange"
19             @current-change="handleCurrentChange"
20           />
21      </el-config-provider>
22 </div>
复制代码

 

posted @   NUNA11  阅读(3672)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示