时语-shine 2025-03-18 18:11 采纳率: 66.7%
浏览 220
已结题

vxe-pager分页器无法正常显示

#问题现象
vxe-pager分页器无法显示出来，浏览器检查其大小为0*0，用内边距撑开也只是一个空白框，没有分页器该有的按钮
#运行效果图

img


#代码片段
#入口html文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

#入口js文件

import { createApp } from 'vue';
import App from './App.vue';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';

const app = createApp(App);
app.use(VXETable);
app.mount('#app');

#app.vue根组件

<template>
  <vxe-table
      show-overflow
      height="300"
      row-id="id"
      :loading="loading"
      :data="tableData">
    <vxe-column type="checkbox" width="60"></vxe-column>
    <vxe-column type="seq" title="序号" width="60"></vxe-column>
    <vxe-column field="name" title="Name" sortable></vxe-column>
    <vxe-column field="sex" title="Sex"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
  </vxe-table>

  <vxe-pager
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.total"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
      @page-change="handlePageChange"
  style="height: 60px; width: 100%">
  </vxe-pager>

</template>

<script setup>
import { ref, onMounted } from 'vue';

// 加载状态
const loading = ref(false);
// 表格数据
const tableData = ref([]);
// 分页数据
const tablePage = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 模拟后台接口
const findList = () => {
  loading.value = true;
  setTimeout(() => {
    const list = [
      { name: 'test_124', sex: '男', age: 32 },
      { name: 'test_190', sex: '女', age: 22 },
      { name: 'name_66', sex: '男', age: 26 },
      { name: 'name_77', sex: '男', age: 28 },
      { name: 'name_17', sex: '女', age: 23 }
    ];
    tableData.value = list;
    tablePage.value.total = 401;
    loading.value = false;
  }, 200);
};

// 分页变化处理
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.value.currentPage = currentPage;
  tablePage.value.pageSize = pageSize;
  findList();
};

// 组件挂载完成后调用获取数据方法
onMounted(() => {
  findList();
});
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

#求助
调试了很久没找到原因，反复安装了vxe-table依赖，不知道是代码问题还是环境问题

  • 写回答

5条回答 默认 最新

  • 宝码香车 优质创作者: JavaScript技术领域 2025-03-18 18:32
    关注
    让【宝码香车】来帮你解答，本回答参考DeepSeek编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。
    如果答案让您满意，请采纳、关注，非常感谢！

    根据你提供的代码和问题描述，vxe-pager 分页器无法正常显示的原因可能有以下几种：

    1. 样式问题：vxe-pager 的样式可能没有正确加载，导致分页器无法显示。
    2. 数据问题：分页器的数据可能没有正确绑定或初始化，导致分页器无法渲染。
    3. 版本问题：vxe-table 的版本可能不兼容，导致分页器无法正常显示。

    解决方案

    1. 检查样式是否正确加载

    确保 vxe-table 的样式文件已经正确引入。你已经在 main.js 中引入了样式文件，但可以尝试在 App.vue 中再次引入样式文件，确保样式生效。

    // App.vue
import 'vxe-table/lib/style.css';

    2. 检查分页器数据绑定

    确保分页器的数据绑定正确，并且 tablePage 的初始值已经正确设置。你可以在 onMounted 钩子中打印 tablePage 的值，确保数据已经正确初始化。

    onMounted(() => {
  findList();
  console.log(tablePage.value); // 打印分页数据，确保数据正确
});

    3. 检查 vxe-pager 的版本兼容性

    确保你使用的 vxe-table 版本是最新的，并且与 Vue 3 兼容。你可以尝试更新 vxe-table 到最新版本。

    npm install vxe-table@latest

    4. 检查 vxe-pager 的布局配置

    确保 vxe-pager 的布局配置正确。你可以尝试简化布局配置，只保留最基本的布局，看看分页器是否能正常显示。

    <vxe-pager
  :loading="loading"
  :current-page="tablePage.currentPage"
  :page-size="tablePage.pageSize"
  :total="tablePage.total"
  :layouts="['PrevPage', 'NextPage', 'Total']"
  @page-change="handlePageChange"
  style="height: 60px; width: 100%">
</vxe-pager>

    5. 检查浏览器控制台是否有错误

    打开浏览器的开发者工具，检查控制台是否有任何错误或警告信息。如果有错误信息，根据错误信息进行排查。

    完整代码示例

    <template>
  <vxe-table
      show-overflow
      height="300"
      row-id="id"
      :loading="loading"
      :data="tableData">
    <vxe-column type="checkbox" width="60"></vxe-column>
    <vxe-column type="seq" title="序号" width="60"></vxe-column>
    <vxe-column field="name" title="Name" sortable></vxe-column>
    <vxe-column field="sex" title="Sex"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
  </vxe-table>

  <vxe-pager
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.total"
      :layouts="['PrevPage', 'NextPage', 'Total']"
      @page-change="handlePageChange"
      style="height: 60px; width: 100%">
  </vxe-pager>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'vxe-table/lib/style.css';

// 加载状态
const loading = ref(false);
// 表格数据
const tableData = ref([]);
// 分页数据
const tablePage = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 模拟后台接口
const findList = () => {
  loading.value = true;
  setTimeout(() => {
    const list = [
      { name: 'test_124', sex: '男', age: 32 },
      { name: 'test_190', sex: '女', age: 22 },
      { name: 'name_66', sex: '男', age: 26 },
      { name: 'name_77', sex: '男', age: 28 },
      { name: 'name_17', sex: '女', age: 23 }
    ];
    tableData.value = list;
    tablePage.value.total = 401;
    loading.value = false;
  }, 200);
};

// 分页变化处理
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.value.currentPage = currentPage;
  tablePage.value.pageSize = pageSize;
  findList();
};

// 组件挂载完成后调用获取数据方法
onMounted(() => {
  findList();
  console.log(tablePage.value); // 打印分页数据，确保数据正确
});
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

    通过以上步骤，你应该能够解决 vxe-pager 分页器无法正常显示的问题。如果问题仍然存在，请检查浏览器控制台是否有其他错误信息，并根据错误信息进一步排查。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 3月30日
  • 已采纳回答 3月22日
  • 创建了问题 3月18日