使用切片的Vue js表

npm install vue

var app = new Vue({
  el: '#app',
  data: {
    tableData: [], // 表格数据
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页显示的条数
  },
  computed: {
    // 计算属性，根据当前页码和每页显示的条数切片表格数据
    slicedData: function() {
      var start = (this.currentPage - 1) * this.pageSize;
      var end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
    // 计算属性，计算总页数
    totalPages: function() {
      return Math.ceil(this.tableData.length / this.pageSize);
    }
  },
  methods: {
    // 方法，切换页码
    changePage: function(page) {
      this.currentPage = page;
    }
  }
});

<div id="app">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in slicedData" :key="item.id">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <td>{{ item.column3 }}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button v-for="page in totalPages" :key="page" @click="changePage(page)">{{ page }}</button>
  </div>
</div>