如何在下表中显示总记录？

问题描述

我在用类星体/ vue显示总行时遇到问题。我无法获得totalRecord。我厌倦了运行，但是没有错误，没有任何想法来显示totalRecord？

<script>
import { ui } from "../ui-helpers/ui";
import * as cu from "../_services/cu";
import {
  required,decimal,minValue,maxValue,requiredIf
} from "vuelidate/lib/validators"
import moment from "moment-timezone"
import Vue from "vue"
import { uid,date } from "quasar"
import MessageBox from "../components/MessageBox"

export default {
  data() {
    return {
      filter: "",mode: "list",scDeFinition: require("../statics/translate.json"),currencyColumns: [
        {
          name: "name",align: "left",label: "Name",field: "name",sortable: true
        },{
          name: "code",required: true,label: "Code",field: "code",{
          name: "buyRate",align: "center",label: "Buy Rate",field: "buyRate",{
          name: "spotRate",label: "Spot Rate",field: "spotRate",{
          name: "sellRate",label: "Sell Rate",field: "sellRate",{
          name: "symbol",labelalign: "left",label: "Symbol",field: "symbol",{
          name: "status",label: "Status",field: "status",sortable: true
        }
      ],currencyData: [
        {
          name: "Malaysian Rinngit",code: "MYR",buyRate: "4.097(-2.5%)",spotRate: "4.19",sellRate: "4.238(+0.5%)",symbol: "RM",status: "Active"
        },{
          name: "Singapore Dollar",code: "SGD",buyRate: "xxxx(-2.5%)",spotRate: "x.xx",sellRate: "x.xxx(+0.5%)",symbol: "$",{
          name: "Chinese Yuan",code: "CNY",symbol: "¥",{
          name: "Malaysian Rinngit",status: "Active"
        }
      ],pagination: {
        page: 1,pageSize: Number(process.env.VUE_APP_REPORT_RECORD_PER_PAGE),rowsPerPage: Number(process.env.VUE_APP_REPORT_RECORD_PER_PAGE)
      },page: 1,totalRecord: 0,pageCount: 1,}
  },methods: {
    async fetchData(newSearch = false) {
      if (newSearch) {
          this.page = 1
        }
      this.totalRecord = 0
  
      var response = await cu.getValue(
        this.pagination.pageSize,this.page
      )

      if (response.Page != null) {
        this.totalRecord = response.Page.total_record
      } else {
        this.totalRecord = response.currencyData.length
      }
      this.pageCount = Math.ceil(
        response.Page.total_record / this.pagination.rowsPerPage
      )
    }
  }
}
</script>

<template>
  <q-page padding>
    <q-table
      flat
      bordered
      class="statement-table"
      title="Currency"
      :data="currencyData"
      :hide-header="mode === 'grid'"
      :columns="currencyColumns"
      row-key="name"
      :grid="mode == 'grid'"
      :filter="filter"
      :pagination.sync="pagination"
    >
      <template v-slot:top-right="props">
        <q-input
          outlined
          dense
          debounce="300"
          v-model="filter"
          placeholder="Search"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>

        <q-btn
          flat
          round
          dense
          :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
          @click="props.toggleFullscreen"
          v-if="mode === 'list'"
        >
          <q-tooltip :disable="$q.platform.is.mobile" v-close-popup>{{
            props.inFullscreen ? "Exit Fullscreen" : "Toggle Fullscreen"
          }}</q-tooltip>
        </q-btn>

        <q-btn
          flat
          round
          dense
          :icon="mode === 'grid' ? 'list' : 'grid_on'"
          @click="
            mode = mode === 'grid' ? 'list' : 'grid';
            separator = mode === 'grid' ? 'none' : 'horizontal';
          "
          v-if="!props.inFullscreen"
        >
          <q-tooltip :disable="$q.platform.is.mobile" v-close-popup>{{
            mode === "grid" ? "List" : "Grid"
          }}</q-tooltip>
        </q-btn>
      </template>

      <template v-slot:body-cell-status="props">
        <q-td :props="props">
          <q-chip
            :color="
              props.row.status == 'Active'
                ? 'green'
                : props.row.status == 'Inactive'
                ? 'red'
                : 'grey'
            "
            text-color="white"
            dense
            class="text-weight-bolder"
            square
            style="width: 85px"
            >{{ props.row.status }}
          </q-chip>
        </q-td>
      </template>
      
      <template v-slot:bottom>
        <div class="pagination-total q-mt-sm flex flex-center">
          <div class="text-medium-regular">
            Total {{ totalRecord }}
            <span v-if="totalRecord > 1">results</span>
            <span v-else>result</span>
          </div>
        </div>
        <div class="pagination-container q-my-sm flex flex-center">
          <q-pagination
            v-model="page"
            color="secondary"
            :input="true"
            :max="pageCount"
            :max-pages="6"
            @input="fetchData(false)"
            :boundary-numbers="true"
          />
        </div>
      </template>
    </q-table>
  </q-page>
</template>

图像输出显示总记录仍为0 [1]：https://i.stack.imgur.com/EbYzw.png

这是Codepen： [Codepen]：https://codepen.io/Adriantango/pen/MWymeEQ

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）