vue3 element-plus分页查询并用axios连接后端，后端传回的数字用中文表示

在Vue3中使用Element Plus做分页查询，并结合axios与后端交互，通常你会创建一个组件，比如`PaginationList.vue`，其中包含分页功能和数据请求。这里是一个简单的示例：

<template>
  <el-pagination
    :total="total"
    :current-page="currentPage"
    @current-change="handleCurrentChange"
  ></el-pagination>
  <el-table
    :data="items"
    ... <!-- 其他table配置 -->
  ></el-table>
</template>

<script setup>
import axios from 'axios';
import { useQuery } from 'vue3-element-query';

const [page, loading] = useQuery({ key: 'page', defaultProp: 1 });

// 分页处理函数
async function handleCurrentChange(pageNumber) {
  loading(true);
  try {
    const response = await axios.get('/api/data', {
      params: { page, pageSize: perPage }, // 假设perPage是每页显示的数量
    });
    const { data, total } = response.data;
    items = data; // 更新页面数据
    currentPage = pageNumber; // 更新当前页数
    loading(false);
  } catch (error) {
    console.error('Error fetching data:', error);
    loading(false);
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

在这个例子中，后端返回的数据包括`data`部分（实际的列表数据），以及`total`（总记录数）。你可以用`response.data.total`获取到总数，然后通过一些库如`moment`、`number`转换成中文字符。

例如：

import numeral from 'numeral'; // 或者其他的中文数字插件

function formatChineseNumber(num) {
  return numeral(num).format('0,0');
}

const totalInChinese = formatChineseNumber(total); // 现在totalInChinese就是中文版的总记录数了