Element-Plus el-pagination分页改中文显示

最新推荐文章于 2024-04-12 15:52:05 发布

huang_hai_an

最新推荐文章于 2024-04-12 15:52:05 发布

阅读量550

点赞数 6

文章标签： vue

本文链接：https://blog.csdn.net/huang_hai_an/article/details/135405750

版权

解决方法

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//2.3.8版本以前使用
// import locale from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus, { locale })
app.mount('#app')

使用分页

<script setup lang="ts">
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 2.3.8版本以前使用
// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>
<template>
<el-config-provider :locale="zhCn">
        <!-- 这里是内容 -->
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]"
          small="small"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
</template>