Vuetify，如何使用 v-pagination 显示每隔两个、三个站点

Question

我正在寻找一种解决方案来修改我的分页组件。我想使用 vuetify 分页组件显示每两个或每三个站点。基本版本允许显示每个页面。

模板：

  <div class="text-center">
    <v-pagination
      v-model="page"
      :length="4"
      prev-icon="mdi-menu-left"
      next-icon="mdi-menu-right"
    ></v-pagination>
  </div>
</template>

脚本：

  export default {
    data () {
      return {
        page: 1,
      }
    },
  }
</script>

数据table:

            <v-data-table dense

              v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    show-select
    class="elevation-1"
       :items-per-page="7"

  > </v-data-table>

Answer 1

您需要为 next 和 previous 事件实现功能。这里我写了一个点击 next 事件的函数。这会发生两个场偏移。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      page: 1,
      length: 6
    }
  },
  methods: {
    next2() {
      if (this.page + 1 <= this.length) {
        this.page = this.page + 1;
      }
    }
  }
})

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <div class="text-center">
        <v-pagination v-model="page" :length="length" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" @next="next2"></v-pagination>
      </div>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>

</html>

Vuetify，如何使用 v-pagination 显示每隔两个、三个站点

Vuetify, how to use v-pagination to display every next two, three sites

pagination

vue.js

vuetify.js