當前檢視：

我要做的是將 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 請 留言