在 vuejs 中获取当前页面

Question

在 vue 中我处理代码：

<b-pagination
  :total-rows="props.total"
  first-number
  last-number
  align="right"
  prev-class="prev-item"
  next-class="next-item"
  class="mt-1 mb-0"
  @input="changePage"
  >
</b-pagination>

这是一个分页示例：

>

methods: {
    changePage() {
         //get current page
    }
}

现在我想在方法中获取当前页面，请给我一些想法，谢谢。

Answer 1

您是否使用 b-pagination ，请参考此链接。 bootstrap-vue

<script>
      export default {
        data() {
          return {
            perPage: 3,
            currentPage: 1,
            items: [
              { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
              { id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
              { id: 3, first_name: 'Barney', last_name: 'Rubble' },
              { id: 4, first_name: 'Betty', last_name: 'Rubble' },
              { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
              { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
              { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
              { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
              { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
            ]
          }
        },
        computed: {
          rows() {
            return this.items.length
          }
        }
      }
    </script>

    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      aria-controls="my-table"
    ></b-pagination>

currentPage 在您的 v-Model 中，并且与 b-table ":current-page" 中的名称一致。

 <p class="mt-3">Current Page: {{ currentPage }}</p>   

<b-table id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></b-table>