1

我正在使用“vue-tables-2”中的 ServerTable 创建一个表，以使用 axios 呈现数据并创建一个分页，但是分页中的问题表在第一页中一起显示所有记录

我试图修复它，但我没有找到任何解决方案

在这里您可以找到我用来创建该表和分页的组件

<template>
  <div class="mt-5">
    <div class="card-header purple-background bord-top-lr-5">
      <h4 class="title-align font-montserrat text-light white-text-color">
        {{ items.count + ' results found' }}
      </h4>
    </div>
    <div class="card-body white-bg">
      <div class="grid-x grid-padding-x m-2 border-0">
        <div class="border-0 mb-2">
          <v-server-table
            url="/companies/search"
            :columns="columns"
            :options="options"
            class="table-header"
          >
            <div slot="company_name" class="m-3" slot-scope="props">
              <h5 class="title-align font-montserrat" style="color: #5b2557">
                <a :href="props.row.url" :title="props.row.name">
                  {{ props.row.name }}
                </a>
                ({{ $t('labels.frontend.companies.demontage') }})
              </h5>
              <div class="row">
                <div class="col">
                  <p
                    class="gray-text-color font-montserrat-thin font-weight-bold"
                  >
                    {{ props.row.address.street }}
                    {{ props.row.address.building_nr }},
                    {{ props.row.address.postal }},
                    {{ props.row.address.city }}, {{ props.row.address.state }},
                    {{ props.row.address.country }}
                  </p>
                </div>
                <div class="col ml-lg-5">
                  <p
                    class="font-montserrat-thin blue-light-color font-weight-bold"
                  >
                    T. {{ props.row.address.phone }}<br />
                    <a
                      :href="props.row.website"
                      target="_blank"
                      :title="props.row.name"
                      class="gray-text-color"
                    >
                      {{ $t('labels.frontend.companies.goTo') }}
                    </a>
                  </p>
                </div>
                <div class="col ml-lg-5">
                  <a
                    class="font-montserrat-regular"
                    href="#"
                    style="color: #74aee0"
                  >
                    {{ $t('labels.frontend.companies.moreInfo') }} »
                  </a>
                </div>
              </div>
              <button
                class="mb-3 blue-light-bg btn bord-rad-5 white-text-color font-montserrat-regular"
                href="#"
              >
                {{ $t('labels.frontend.companies.stock') }}
              </button>
              <br />
            </div>
          </v-server-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { ServerTable } from 'vue-tables-2'

Vue.use(ServerTable, {}, false, 'bootstrap4', 'default')

export default {
  name: 'SearchCompaniesTable',
  props: {
    companyName: {
      type: String,
      required: false,
      default: () => ''
    }
  },
  data() {
    return {
      total: 0,
      items: [],
      columns: ['company_name'],
      options: {
        headings: {
          remote_id: 'Document'
        },
        highlightMatches: true,
        pagination: {
          chunk: 10,
          edge: true,
          dropdown: false,
          nav: 'fixed'
        },
        perPage: 10,
        perPageValues: [10],
        preserveState: true,
        sortable: ['company_name'],
        filterable: ['company_name'],
        skin: 'table-bordered table-hover'
      },
      page: 1
    }
  },
  computed: {
    rows() {
      return Object.keys(this.items).length
    }
  },
  mounted() {
    axios.get('/companies/search').then(response => {
      this.items = response.data
    })
  }
}

你能检查一下我犯了什么错误吗？

4

0 回答 0