Vuetify——分页细节问题

在列表中处理分页是一件很常见的场景：当用户操作删除的时，如果在第三页中做删除，删除一条后，第三页还有列表数据，就仍展示删除后的第三页的列表数据；假如在第三页删除，将第三页最后一条数据删除后，第三页无列表数据，就需要展示第二页的列表数据；

<template>
  <div class="SourceList">
	<v-simple-table class="table-wrapper" style="position:relative;width:100%">
      <template v-slot:default>
        <v-progress-circular
          v-if="loading"
          indeterminate
          color="primary"
          style="position:absolute;top:20%;left:50%;margin-left:-16px;"
        ></v-progress-circular>
        <thead>
          <tr>
            <th class="text-left pl-4">
              ID
            </th>
            <th class="text-left">
              {{ $t("SubApplication Name") }}
            </th>
            <th class="text-left">
              {{ $t("SubApplication Description") }}
            </th>
            <th class="text-center">
              {{ $t("Actions") }}
            </th>
          </tr>
        </thead>
        <tbody v-if="sources.length > 0">
          <tr v-for="item in sources" :key="item.id" class="text-left">
            <td class="pl-4">{{ item.id }}</td>
            <td>{{ item.claims.username }}</td>
            <td
              :style="{
                color: item.description ? '' : '#9195a3'
              }"
            >
              {{ item.description || "无" }}
            </td>
            <td class="text-center">
              <v-btn icon @click.stop="edit(item)">
                <v-icon>
                  mdi-square-edit-outline
                </v-icon>
              </v-btn>
              <v-btn icon elevation="0" @click.stop="show_info(item)" v-if="0">
                <v-icon>
                  mdi-text-box-search-outline
                </v-icon>
              </v-btn>
              <v-btn
                icon
                elevation="0"
                color="red"
                @click.stop="deleteSource(item)"
              >
                <v-icon>
                  mdi-trash-can-outline
                </v-icon>
              </v-btn>
            </td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr class="text-center">
            <td
              colspan="5"
              style="width:100%;border-bottom:1px solid #E0E0E0;color:#7b7b7b"
            >
              暂无数据
            </td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
    <v-pagination
      v-if="Math.ceil(totalPage / limit) > 1"
      v-model="curPage"
      :length="Math.ceil(totalPage / limit)"
      total-visible="7"
      @input="onPageChange(curPage, limit)"
    ></v-pagination>
  </div>
</template>
export default {
  name: "SubApplicationList",
  data() {
    return {
      curPage: 1,
      limit: 10,
      totalPage: 0,
      sheet_editor: null,
      current_id: null,
      show_confirm: null,
      sources: [],
      curSubData: {},
      is_readonly: null,
      curProviderType: null,
      type: null,
      curId: "",
      loading: false
    };
  },
  created() {
    this.refreshList();
    bus.$off("refreshSub").$on("refreshSub", () => {
      this.onPageChange(this.curPage, 10);
    });
  },
  methods:{
  refreshList(curPage = 1, limit = 10) {
      return this.$http
        .get(
          `api/${
            this.$route.params.id
          }/list?offset=${(curPage - 1) * limit}&limit=${limit}`
        )
        .delegateTo(api_request)
        .then(res => {
          this.totalPage = res.total;
          this.sources = res.accounts;
          this.curProviderType = res.type;
        })
        .delegateTo(this.$snackbar.delegateError);
    },
	onPageChange(curPage, limit) {
      this.refreshList(curPage, limit);
    },
	deleteSource({ id, claims: { username } }) {
      this.$refs.confirm
        .showConfirm({
          contentText: `您确认要删除账户？ #${id} ${username}`,
          callback: () => {
            return this.$http
              .post(
                `api/${this.$route.params.id}/account/${id}/archive`
              )
              .delegateTo(api_request)
              .then(() => {
                this.curPage =
                  this.curPage > Math.ceil((this.totalPage - 1) / 10)
                    ? this.curPage - 1
                    : this.curPage;
                if (this.totalPage - 1 > 0) {
                  this.onPageChange(this.curPage, 10);
                } else {
                  this.refreshList();
                }
                return "账户已成功删除";
              })
              .catch(({ code, message }) => {
                throw `账户删除失败：${this.$t(
                  "api." + code
                )}, 额外信息: ${this.$t("api." + JSON.stringify(message))}`;
              });
          }
        })
        .catch(() => {
          return;
        });
    },
 },
}