ant vue Pagination翻页删除逻辑

  • Z时代
  • 2024-02-23
  • 分类：IT

ant vue Pagination翻页删除逻辑

一个列表，ant翻页组件，又设计需求加上只有一页隐藏，比如10条每页，当11条数据时，删除第11条数据，会出现请求第二页，但是没有数据，又没有翻页组件。

如何封装或者最小程度改动处理这个问题

回答：

可以在只有一页隐藏的基础上继续修改，改成只有一页且当前页在第一页隐藏

回答：

写一个通用的搜索列表请求方法，当前页无数据且接口返回的总条数不为0，则以正确的页数重新请求

回答：

这个组件需要你提供总行数:total啊，删除或插入成功之后改一下total就好了吧。只有一页隐藏本身也是属性，hideOnSinglePage=true就行了。

<template>
  <a-pagination :hideOnSinglePage="true" v-model:current="current" v-model:total="total" show-less-items />
  <button @click="afterDelete">Delete</button>
  <button @click="afterCreate">Create</button>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const perPage = 10;
    const current = ref(2);
    const total = ref(10);
    return {
      current,
      total,
      afterDelete() {
        total.value = total.value - 1;
        if (total.value % perPage === 0 && current.value >= Math.ceil(total.value / perPage)) {
            current.value = Math.ceil(total.value / perPage));
            // 重新读取当前页
        }
      },
      afterCreate() {
        total.value = total.value + 1;
      }
    };
  },
});
</script>

回答：

当前页不是第一页且当前页无数据时，自动请求前一页

以上是 ant vue Pagination翻页删除逻辑 的全部内容， 来源链接： utcz.com/p/936695.html

回到顶部