el-pagination 分页组件 ‘英文’ 修改为 ‘中文’(Vue3+ElementPlus实现)

自学前端第一天2023-10-19 17:32

目标效果

先看下 element-plus 官网的效果

想要的目标效果如下：

实现

废话不多说，先上代码

jsx 复制代码

//main.ts
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; 
import zhCn from 'element-plus/es/locale/lang/zh-cn';
// 修改分页器默认文字
zhCn.el.pagination.total = '共 `{total} 条`';
zhCn.el.pagination.goto = '跳至';
zhCn.el.pagination.pagesize = '条/页';
zhCn.el.pagination.pageClassifier = '页';

const app = createApp(App);
app.use(ElementPlus, { locale: zhCn }).mount('#app');

一般情况直接在main.ts 配置完就可以了，但是我的项目使用的 unplugin-vue-components 和 unplugin-auto-import 按需自动导入组件，有什么方法可以不用全局引入 ElementPlus 直接修改吗，当然！

element 官网提供了一个组件 Config Provider,我们可以通过 ElConfigProvider 来实现语言配置。完整代码如下：

jsx 复制代码

<template>
  <el-config-provider :locale="zhCn">
    <el-pagination
      class="h-46 mr-50 flex justify-end"
      v-if="pagination.isShow && pagination.total > 0"
      v-model="pagination.current"
      :layout="pagination.layout"
      :pager-count="5"
      :page-sizes="pagination.pageSizes"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-config-provider>
<template/>
<script setup>
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus';
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
// 更改分页文字
// zhCn.el.pagination.total = '共 `{total} 条`';
// zhCn.el.pagination.goto = '跳至';
// zhCn.el.pagination.pagesize = '条/页';
// zhCn.el.pagination.pageClassifier = '页';
<script/>

如果修改配置报错，可能时引入zhcn路径不正确，建议检查下elementplus版本,检查文件路径。

如果你想对所有使用的组件都转换中文，可以直接使用 <el-config-provider :locale="zhCn"></el-config-provider> 包裹路由来实现。