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 请留言

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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