如何让 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

已更新 Fiddle：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 秒以在 mounted

中更新 pagination.setCurrentPage

  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)
  },

如何让 vue-good-table 每 5 秒自动跳转到下一页？

How can I make a vue-good-table automatically go to the next page every 5 seconds?

vue.js

vue-good-table