我想在第一次加载时显示加载数据组件，而不是在第一次加载后的下一次加载时显示它

Question

我有一个账单信息页面，当我进入它时，异步获取函数被调用，调用 getBillingInformations() 函数，它加载数据并显示在表中。 在加载表的数据时，我有一个 TsContentLoader 组件，它仅在我进入该页面或刷新时加载数据时显示。 该表已分页并具有过滤器和排序功能。 当我更改表中的页面并对其进行适当过滤时，我不会显示 TsContentLoader 但会保留当前数据，直到加载新数据为止

我的目标是当我在表格分页上更改页面时，或者当我在表格上应用过滤器时，等待更改的旧数据被禁用，这意味着它无法被点击并且我为其添加不透明度

这是带有表格和分页的模板：

<TsContentLoader v-if="isLoading" type="table" />

    <TsTable
      v-else
      :columns="columns"
      :data="billingInformations || []"
      :identifier="'id'"
      hoverable
      @sortChanged="sortChanged"
    >
      <template #date="{ item }">
        {{ $dateFns.format(item.createdAt, 'dd MMM yyyy @ hh:mm:ss') }}
      </template>

      <template #company="{ item }">
        {{ item.companyName || '-' }}
      </template>

      <template #paymentType="{ item }">
        {{ $pascalCase(item.paymentType) || '-' }}
      </template>

      <template #paymentReference="{ item }">
        {{ item.paymentReference || '-' }}
      </template>
      <template #serviceProvider="{ item }">
        {{ checkProvider(item) }}
      </template>

      <template #paymentMethod="{ item }">
        <template v-if="item.paymentMethod === 'CREDIT_CARD'">
          Credit card
        </template>

        <template v-else>
          {{ $pascalCase(item.paymentMethod) || '-' }}
        </template>
      </template>

      <template #serviceType="{ item }">
        {{ $pascalCase(item.serviceType) || '-' }}
      </template>
      <template #serviceTripId="{ item }">
        {{ item.serviceTripId || '-' }}
      </template>
      <template #actualPrice="{ item }">
        {{
          $_formatMoney(item.baseAmount, {
            currency: item.currency,
            type: getPaymentType(item),
          })
        }}
      </template>

      <template #tspotFee="{ item }">
        {{
          $_formatMoney(item.feeBase, {
            currency: item.currency,
            type: getPaymentType(item),
          })
        }}
      </template>

      <template #vatFee="{ item }">
        {{
          $_formatMoney(item.feeVAT, {
            currency: item.currency,
            type: getPaymentType(item),
          })
        }}
      </template>

      <template #amount="{ item }">
        <span
          :class="
            getPaymentType(item) === 'negative' ? 'amount-red' : 'amount-green'
          "
        >
          {{
            $_formatMoney(item['totalAmount'], {
              currency: item.currency,
              type: getPaymentType(item),
            })
          }}
        </span>
      </template>

      <template #invoiceNumber="{ item }">
        <span v-if="item['invoiceNumber']"> {{ item.invoiceNumber }}</span>
        <span v-else>No invoice</span>
      </template>
      <template #downloadInvoice="{ item }">
        <span v-if="item['id']" class="ts-url" @click="downloadInvoice(item.id)"
          >Download</span
        >
        <span v-else>No invoice</span>
      </template>
    </TsTable>
    <TsPagination
      :total="pagination.total"
      :page-size="pagination.perPage"
      :current-page="pagination.page"
      @size-change="sizeChange"
      @view-all="paginationViewAll"
      @current-change="paginationChange"
    ></TsPagination>

这是检索账单信息数据的功能，过滤功能和排序功能：

 async getBillingInformations() {
  if (this.pagination.perPage === 0) {
    this.pagination.perPage = 1
  }
  /* this.isLoading = true */
  await this.$store
    .dispatch('company/getBillingInformations', {
      page: this.pagination.page,
      perPage: this.pagination.perPage,
      companyName: this.filterBillingInformation.companyName || undefined,
      companyID: this.filterBillingInformation.companyID || undefined,
      serviceId: this.filterBillingInformation.serviceId || undefined,
      paymentDateFrom: this.filterBillingInformation.startDate || undefined,
      paymentDateTo: this.filterBillingInformation.endDate || undefined,
      paymentTypes:
        this.filterBillingInformation.paymentType.join(',') || undefined,
      sort: this.sortBy || undefined,
    })
    .then((res) => {
      this.isLoading = false
      if (res.count < 1) {
        this.billingInformations = res.payments
      } else {
        this.handleBillingInformations(res.payments)
        this.pagination.total = res.count
        this.searchResultSize = res.count
      }
    })
    .catch((err) => {
      this.isLoading = false
      return err
    })
},
async handleBillingInformations(payload) {
  this.billingInformations = []
  this.billingInformations = await payload
},

    /*  FILTER  */

    applyFilter() {
      this.changePage(1)
      this.getBillingInformations()
    },
    toggleFilter() {
      this.filterDropdown = !this.filterDropdown
    },
    clearAllFilters() {
      ;(this.filterBillingInformation.companyName = ''),
        (this.filterBillingInformation.companyID = ''),
        (this.filterBillingInformation.serviceId = ''),
        (this.filterBillingInformation.startDate = ''),
        (this.filterBillingInformation.endDate = ''),
        (this.filterBillingInformation.paymentType = []),
        (this.sortBy = ''),
        this.applyFilter()
    },
    removeActiveFilter(value) {
      if (Object.keys(value)[0] === 'Company Name') {
        this.filterBillingInformation.companyName = ''
      }
      if (Object.keys(value)[0] === 'Company ID') {
        this.filterBillingInformation.companyID = ''
      }
      if (Object.keys(value)[0] === 'Service ID') {
        this.filterBillingInformation.serviceId = ''
      }
      if (Object.keys(value)[0] === 'Start date') {
        this.filterBillingInformation.startDate = ''
      }
      if (Object.keys(value)[0] === 'End date') {
        this.filterBillingInformation.endDate = ''
      }
      if (Object.keys(value)[0] === 'Payment type') {
        this.filterBillingInformation.paymentType = []
      }
      return this.getBillingInformations()
    },
    
     sortChanged(key) {
      if (this.isSorted) {
        this.isSorted = false
        this.sortBy = `${key}`
      } else {
        this.isSorted = true
        this.sortBy = `-${key}`
      }
      this.getBillingInformations()
    },