Element-plus中 Pagination 分页组件国际化和对齐方式设置

一、国际化设置

官方提供的两种方式：

1.全局配置

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

2.ConfigProvider按需引入

1)引入ElConfigProvider 和中文包

2）用ElConfigProvider组件包裹需要国际化的组件

<template>
    <el-config-provider :locale="locale">
        <el-pagination 
            v-model:current-page="pageData.currentPage" 
            v-model:page- size="pageData.pageSize" 
            :page-sizes="[5, 10, 15, 20]" size="default" 
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" />
    </el-config-provider>
</template>

<script>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const locale = ref(zhCn)
</script>

二、分页组件的对齐方式

1.居中

<style scoped>
.el-pagination {
    margin-top: 15px;
    justify-content: center;
}
</style>

2.右对齐

<style scoped>
.el-pagination {
    margin-top: 15px;
    justify-content: right;
}
</style>