vue ts el-pagination 设置中文

在Vue中使用Element Plus的el-pagination组件设置中文，可以通过引入中文包和配置locale属性来实现。在你提供的代码中，可以看到你已经引入了中文包，并将其赋值给了locale变量。接下来，你可以将locale属性传递给el-config-provider组件，以实现中文显示。具体代码如下所示：

<template>
  <el-config-provider :locale="locale">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="\[100, 200, 300, 400\]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    ></el-pagination>
  </el-config-provider>
</template>

<script lang="ts">
import { reactive } from 'vue';
import { ElConfigProvider } from 'element-plus';
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
  components: {
    \[ElConfigProvider.name\]: ElConfigProvider
  },
  setup() {
    let locale = zhCn;

    const handleSizeChange = (val: number) => {
      // 处理每页展示的数据条数变化
    };

    const handleCurrentChange = (val: number) => {
      // 处理当前页的页码变化
    };

    return {
      locale,
      handleSizeChange,
      handleCurrentChange
    };
  }
};
</script>

<style scoped>
</style>

在上述代码中，我们将中文包引入为`zhCn`，并将其赋值给`locale`变量。然后，我们将`locale`属性传递给`el-config-provider`组件，以确保el-pagination组件以中文显示。同时，我们还定义了`handleSizeChange`和`handleCurrentChange`方法来处理每页展示的数据条数和当前页的页码变化。你可以根据自己的需求进行相应的处理。
#### 引用[.reference_title]
- *1* [vue3+TS+Element-plus el-pagination分页组件显示中文](https://blog.csdn.net/tianchoy/article/details/123683583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue3 el-pagination二次封装](https://blog.csdn.net/baidu_38855546/article/details/124959326)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue3+ts+element-plus 组件的二次封装-- 页脚分页el-pagination的二次封装](https://blog.csdn.net/cs492934056/article/details/128096257)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]