vue3 el-pagination 将 英文 修改 为 中文

当前视图：

我要做的是将 Total 类似的 英文 改为 中文

 

1.  在组件里引入  ElConfigProvider 组件 和中文包

// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

2. 注册 组件 components: { ElConfigProvider }   因为我这里是 setup 写法。不用去注册 已经帮我完成了

3. 使用 ElConfigProvider  组件 (大写变小写 驼峰 加 - 号)  绑定 locale 语言环境  将 内容写在 ElConfigProvider  里 包裹起来就可以了。

<el-config-provider :locale="zhCn">
     <!-- 这里是内容 -->
     <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-config-provider>

4. 期望结果：

5.  贴上完整代码：

<template>
  <el-config-provider :locale="zhCn">
     <!-- 这里是内容 -->
     <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-config-provider>
    
</template>
<script setup>
import { ref } from 'vue'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = val => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = val => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>

</style>

6. 如果有错， 请查看下 写法 是不是有区别  或者 导入 文件是否有误   如有bug 请 留言