526互联

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

发布时间 2023-06-28 17:33:39作者: NUNA11

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>