vue.js - 如何使 vue-good-table 每 5 秒自动转到下一页？

Question

这是他们拥有的一个教程中的一个 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/

Answer 1

更新小提琴：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}">

setintervalpagination.setCurrentPage5 秒内更新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)
  },