vue.js + vuetify로 페이지 네이션

15945 단어 Vue.jsVuetify

개요



페이지 네이션을 작성해 보려고 조사했으므로 메모해 둔다.

우선, 페이지 네이션에 전념하고 싶기 때문에, 데이터의 취득 등은 생략합니다.
또, vuetify 자체의 인스톨은, 별도 하기 페이지에서 기술하고 있으므로 생략합니다.
  • Vuetify를 설치하고 사용해보기

  • 플러그인 생성



    공통 처리를 쓸 수 있도록 플러그인으로 둔다.
    계산 관련이나 페이지 네이션의 정보는, 이 플러그인에 집약해 둔다.

    plugins/pagination.js
    const Pagination = {
      install (Vue, options) {
        const store = new Vue({
          data: {
            current       : 0,   // 現在のページ番号
            visible       : 7,   // ページネーションのリンクに表示するページ数
            total         : 0,   // ページの総数
            rows          : 0,   // データの総数
            rows_per_page : 10   // 1ページに表示するデータの件数
          }
        });
    
        function setTotal() {
          store.total = Math.ceil(store.rows / store.rows_per_page);
        }
    
        Vue.prototype.$page = {
          get current() {
            return store.current;
          },
          get visible() {
            return store.visible;
          },
          get total() {
            return store.total;
          },
          set current(num) {
            const current = (num != null) ? parseInt(num) : 1;
            store.current = Math.max(1, Math.min(current, store.total));
          },
          set rows(num) {
            store.rows = (num != null) ? parseInt(num) : 0;
            setTotal();
          },
          set rowsPerPage(num) {
            store.rows_per_page = (num != null) ? parseInt(num) : 0;
            setTotal();
          }
        }
      }
    };
    export default Pagination
    

    만들어 보자



    컴퍼넌트를 작성해 본다.

    List.vue
    <template>
      <v-app light class="contents">
    
        <div class="text-xs-center">
          <v-pagination
            v-model="$page.current"
            v-bind:length="$page.total"
            v-bind:total-visible="$page.visible"
          ></v-pagination>
        </div>
    
        <div class="text-xs-center">
          <v-pagination
            v-model="$page.current"
            v-bind:length="$page.total"
            v-bind:total-visible="$page.visible"
            prev-icon="mdi-menu-left"
            next-icon="mdi-menu-right"
            dark
          ></v-pagination>
        </div>
    
      </v-app>
    </template>
    
    <script>
      import Vue from 'vue';
      import Pagination from '@/plugins/pagination.js'
      Vue.use(Pagination);
    
      export default {
        name: 'ArticleList',
        data () {
          return {
            list: []
          }
        },
        created() {
          this.list = [
            {id: 1, title: 'hoge', description: 'text'},
            {id: 2, title: 'hoge', description: 'text'},
            {id: 3, title: 'hoge', description: 'text'},
                               .
                               .
                               .
            {id:38, title: 'hoge', description: 'text'},
            {id:39, title: 'hoge', description: 'text'},
            {id:40, title: 'hoge', description: 'text'}
          ];
        },
        mounted() {
          this.$page.current = this.$route.query.page; // URLのクエリの値をセット
          this.$page.rowsPerPage = 5;                  // 1ページに表示する件数
          this.$page.rows = this.list.length;          // 総件数
        },
        watch: {
          /**
           * ページ番号の変化を監視
           */
          '$page.current': function (newNumber) {
            // ページ番号が変わったら、URLのクエリの値も変更する
            this.$router.push({name: this.name, query: {page: newNumber}})
          }
        },
      }
    </script>
    

    테스트



    움직여 보자

    페이지 수가 많은 경우)


    페이지 수가 적은 경우)


    글쎄, 일단 움직였다.

    참고 사이트


  • Vuetify - Pagination
  • vue-router + apollo + vuetify로 페이지 네이션 만들기
  • Vue.js로 페이지 번호가 매겨진 페이지 네이션 만들기
  • 좋은 웹페이지 즐겨찾기