ZBLOG

在 Vue.js 中,如果你想要在接口联调时即使没有返回数据也能够显示分页信息,可以考虑以下几个步骤:

  1. 定义一个分页状态:创建一个用于存储当前页数和总条数的响应式对象。
  2. 更新 queryTable 函数:即使接口返回的数据为空,也要根据一定的逻辑(比如设定的总条数)来更新分页状态。
  3. 使用分页组件:将分页组件与状态绑定,以便在没有数据时仍然能显示。

以下是如何实现这些步骤的示例代码:

  1. <template>
  2. <div>
  3. <a-row>
  4. <!-- ... (你的日期选择器和查询按钮) ... -->
  5. </a-row>
  6. <!-- 表格部分 -->
  7. <a-table :data-source="data" :pagination="pagination" @change="handlePageChange">
  8. <!-- 表格列配置 -->
  9. </a-table>
  10. <a-pagination
  11. v-if="pagination.total > 0"
  12. :current="pagination.current"
  13. :pageSize="pagination.pageSize"
  14. :total="pagination.total"
  15. @change="handlePageChange" />
  16. </div>
  17. </template>
  18. <script setup>
  19. import { ref, reactive } from 'vue';
  20. const data = ref([]);
  21. const pagination = reactive({
  22. current: 1,
  23. pageSize: 5,
  24. total: 0
  25. });
  26. const formState = reactive({});
  27. const queryTable = () => {
  28. const params = {
  29. draw: pagination.current,
  30. length: pagination.pageSize,
  31. order: [],
  32. search: { regex: false, value: '' },
  33. params: {
  34. customerId: 'A10101',
  35. start: (pagination.current - 1) * pagination.pageSize // 根据当前页计算起始索引
  36. }
  37. };
  38. CollectionRecord(params)
  39. .then((response) => {
  40. if (response.data && response.data.length > 0) {
  41. data.value = response.data;
  42. pagination.total = response.total; // 更新总条数
  43. } else {
  44. data.value = []; // 清空数据
  45. pagination.total = params.length; // 可以设置为一个默认值或保持不变,具体视业务逻辑而定
  46. }
  47. })
  48. .catch((error) => {
  49. console.error(`请求失败: ${error}`);
  50. });
  51. };
  52. const handlePageChange = (page, pageSize) => {
  53. pagination.current = page;
  54. pagination.pageSize = pageSize;
  55. queryTable(); // 刷新表格数据
  56. };
  57. // 重置函数等...
  58. </script>

注意事项:

  • Pagination 配置:确保为 <a-table><a-pagination> 提供正确的数据源和绑定方法,以便它们可以正确显示。
  • 响应处理:当接口返回没有数据时,你可以根据需要调整 pagination.total 的值。这里设为 params.length 是一种方式,但你可能会希望提供更直观的信息,例如重置为 0,表示没有可用数据。
  • 页面变化处理:记得在用户改变页面时,调用 queryTable() 来刷新表格数据。

这样,即使接口未返回任何数据,你也能在界面上保留分页信息,并适当地提示用户。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19842

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?