0

我正在使用 vue-good-table Vue 的组件，但是分页有问题。基本上，第一页总是显示一条记录丢失。我的意思是，如果我将 'perPage' 选项设置为 10，则第一页显示 9 条记录，而所有其他页面显示 10 条记录。会是什么呢？

我的代码：

应用程序.js

require('./bootstrap');
window.Vue = require('vue');
window.axios = require('axios');
Vue.component("my-table", require("./components/MyTable.vue").default);
const app = new Vue({
    el: '#app',
});


MyTable.vue

<template>
  <div>
    <vue-good-table
      @on-selected-rows-change="selectionChanged"
      @on-select-all="selectAll"
      :columns="columns"
      :rows="rows"
      styleClass="vgt-table striped condensed"
      :select-options="{ 
          enabled: true,
          selectOnCheckboxOnly: true,
          selectionText: 'record selezionati',
          clearSelectionText: 'Pulisci',
          selectionInfoClass: '',
        }"
      :search-options="{
          enabled: true,
          placeholder: 'Cerca', 
        }"
      :sort-options="{
          enabled: true,
          initialSortBy: {field: 'numero_verbale', type: 'asc'}
        }"
      :pagination-options="{
            enabled: true,
            mode: 'records',
            perPage: 10,
            position: 'top',
            perPageDropdown: [5, 10, 20],
            dropdownAllowAll: true,
            nextLabel: 'Prossima',
            prevLabel: 'Precedente',
            rowsPerPageLabel: 'Record per pagina',
            ofLabel: 'di',
            allLabel: 'Tutti',
            }"
        >

        <div slot="selected-row-actions">
          <button class="mr-4">Action 1</button>
          <button class="mr-4">Action 2</button>
          <button >this.routeURL</button>
        </div>

        <template slot="table-row" slot-scope="props">
            <span v-if="props.column.field == 'elimina'">

                  <button @click="deleteOrdinanza(props.row.id, props.index)" class="bg-grey-200 text-sm"> ELI</button>

            </span>
            <span v-if="props.column.field == 'dettaglio'">
                  <button @click="rowId(props.row.id, props.index)" class="bg-grey-200 text-sm"> DETTAGLIO</button>     
            </span>
            <span v-else>
                {{props.formattedRow[props.column.field]}}
            </span>

        </template>


        </vue-good-table> 

  </div>
</template>

<script>
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';
axios.defaults.baseURL = 'http://127.0.0.1:8000/api';


export default {
  name: 'my-table',

  props: {
    ordinanze: String,
    },

  data(){
    return {
      columns: [
        {
          label: 'ID',
          field: 'id',
          type: 'number',
          // hidden: true
        },
        {
          label: 'N° Verbale',
          field: 'numero_verbale',
          type: 'number',
          width: '130px'
        },
        {
          label: 'Data Verbale',
          field: 'data_verbale',

          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM Do yy',
        },
        {
          label: 'Cognome',
          field: 'cognome',
        },
        {
          label: 'Nome',
          field: 'nome',
        },
        {
          label: 'Codice Fiscale',
          field: 'codice_fiscale',
        },
        {
          label: 'Città',
          field: 'citta',
        },
        {
          label: 'Provincia',
          field: 'provincia'
        },
        {
          label: 'Data Notifica',
          field: 'data_notifica',

          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM Do yy',
        },
        {
          label: '',
          field: 'elimina',
          sortable: false,
        },
        {
          label: '',
          field: 'dettaglio',
          sortable: false,
        },

      ],

    rows : JSON.parse(this.ordinanze) , 

    };
  },


  methods: {
      rowId(idParam) {
          console.log(idParam);
      },

      deleteOrdinanza(id, index){
        console.log(id);
        console.log(index);
        axios.delete('/ordinanze/' + id)
            .then(response => {
              console.log(response);
            })
            .catch(error => {
              console.log(error)
            });

        this.rows.splice(index,1);
      }
  },

  components: {
    VueGoodTable,
    },
};
</script>



vuegoodtable.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue comp test  </title>
    <script src="/js/app.js" defer></script>
</head>
<body>

   {{-- table component--}}
   {{-- $ordinanze is the array with all the table records--}}

   <div id="app" class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-3">      
      <my-table :ordinanze='@json($ordinanze)'></my-table>
    </div>

</body>
</html>


谢谢！

4

1 回答 1

0

我想知道您是否使用的是 vue-good-table v2.19。2，因为我已经看到您对该版本的问题。如果是这样，您将不会在使用 2.19 时看到此问题。1或 2.19。3（即当前最新版本）。

于 2020-06-05T02:34:08.110 回答