Vue.js 带有服务器表的分页在vue js上不起作用

我正在使用“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
    })
  }
}

{{items.count+'找到结果'}}
（{{$t（'labels.frontend.companys.demantage'）}）

{{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}


T.{{props.row.address.phone}}


{{$t（'labels.frontend.companys.stock'）}


从“Vue”导入Vue
从“vue-tables-2”导入{ServerTable}
use（ServerTable，{}，false，'bootstrap4'，'default'）
导出默认值{
名称：“SearchCompanyTable”，
道具：{
公司名称：{
类型：字符串，
必填项：false，
默认值：（）=>“”
}
},
数据（）{
返回{
总数：0，
项目：[]，
列：[“公司名称”]，
选项：{
标题：{
远程\u id:“文档”
},
highlightMatches：没错，
分页：{
区块：10，
edge:没错，
下拉列表：false，
导航：“固定”
},
每页：10，
perPageValues:[10]，
国家：是的，
可排序：[“公司名称”]，
可筛选：[“公司名称”]，
蒙皮：“表格边框表格悬停”
},
页码：1
}
},
计算：{
行（）{
返回Object.keys（this.items）.length
}
},
安装的（）{
get（'/companys/search'）。然后（response=>{
this.items=response.data
})
}
}

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