Блог

Вот пример vue-good-table из одного из имеющихся у них руководств, но я хочу иметь возможность переходить на следующую страницу каждые 5 секунд, а затем, когда в конце, перезапускаться обратно на pg1. Как это можно было бы сделать?

HTML:

 <div id="app">
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{ enabled: true, perPage: 5}"
:search-options="{ enabled: true}"> 
</vue-good-table>                  
</div>
  

JS:

 
new Vue({
  el: '#app',
  data() {
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
        { id:7, name:"Jane", age: 24, createdAt: '2013-09-21' },
        { id:8, name:"Susan", age: 16, createdAt: '2013-10-31', score: 0.03343 },
      ],
    };
  },
});
  

https://jsfiddle.net/aks9800/57a2a4ce/

Обновленная скрипка:https://jsfiddle.net/4hfrtL5q /

Установите разбивку на страницы в data

 pagination: {
        enabled: true,
        perPage: 3,
        setCurrentPage: 1
      }
  

передайте pagination-options реквизиты компоненту.

   <vue-good-table :columns="columns" :rows="rows" :pagination-options="pagination" :search-options="{ enabled: true}">
  

setinterval в течение 5 секунд для обновления pagination.setCurrentPage в mounted

   mounted() {

    setInterval(() => {
      let count = this.rows.length,
        perpage = this.pagination.perPage,
        currentpage = this.pagination.setCurrentPage
        this.pagination.setCurrentPage = count / perpage > currentpage ? currentpage   1 : 1
    }, 5000)
  },