Vueでページングコンポーネントを実装するにはどうすればよいですか?

Vue は優れたフロントエンド フレームワークであり、大量のデータを処理する場合にはページング コンポーネントが不可欠です。ページネーション コンポーネントを使用すると、ページが整理され、ユーザー エクスペリエンスも向上します。 Vue では、ページング コンポーネントの実装は複雑ではありません。この記事では、Vue がページング コンポーネントを実装する方法を紹介します。

1. 要件の分析

ページング コンポーネントを実装する前に、要件を分析する必要があります。基本的なページング コンポーネントには、次の機能が必要です。

1. 現在のページ数、合計ページ数、各ページに表示されるアイテム数を表示します
2. ページングをクリックします別のページに切り替えるボタン
3. 現在のページのデータを表示
#現在のページ番号を強調表示
4. ##ページングバー番号セレクターを表示
5. #2. 実装手順

ファイルの分割

##管理を容易にするために、ページング コンポーネントを 3 つのファイルに分割しました:

Pagination.vue : ページング コンポーネントのメイン ファイル。主にロジックとイベント処理を担当します。

PaginationItem.vue: ページネーション コンポーネントのサブコンポーネント。主にページネーション ボタンのレンダリングを担当します。

• SelectPerPage.vue: ページング項目セレクター コンポーネント。主に項目選択ドロップダウン ボックスのレンダリングと変更イベントの処理を担当します。
• ページング データのバインディング

現在のページ番号、ページごとの項目数などのページング関連データを保存するには、いくつかの変数を定義する必要があります。 、および総ページ数。これらの変数は Pagination.vue で定義する必要があります。同時に、親コンポーネントから渡されたデータを受け取るために props 属性を導入する必要もあります。

2. export default {
     props: {
       currentPage: { // 当前页码
         type: Number,
         required: true
       },
       total: { // 总记录数
         type: Number,
         required: true
       },
       perPage: { // 每页展示条数
         type: Number,
         required: true
       }
     },
     data () {
       return {
         pages: Math.ceil(this.total / this.perPage), // 总页数
         pageList: [] // 存储当前页面展示的页码
       }
     },
     mounted () {
       this.getPageList(this.currentPage)
     }
   }

ページング ボタンのレンダリング

ページング ボタンをサブコンポーネントに分割します。これは主に、ページング ボタンのレンダリングとページング切り替えイベントの処理に使用されます。 PaginationItem.vue の内容は次のとおりです。

3. <template>
     <li :class="{ active: active }">
       <a @click.prevent="handleClick" href="#">
         {{ label }}
       </a>
     </li>
   </template>
   
   <script>
   export default {
     props: {
       label: { // 按钮上的数字或图标
         required: true
       },
       pageNum: { // 按钮代表的页码
         required: true
       },
       active: { // 判断按钮是否处于激活状态
         default: false
       }
     },
     methods: {
       // 点击分页按钮时触发
       handleClick () {
         this.$emit('change', this.pageNum)
       }
     }
   }
   </script>

Pagination.vue では、v-for ディレクティブを使用して複数の PaginationItem.vue コンポーネントをレンダリングする必要があります。ページ数は特定のルールに従って生成される必要があります。このルールについては、次のコードを参照してください:

methods: {
  // 获取当前页显示的页码
  getPageList (currentPage) {
    let pageList = [] // 存储页码数据
    const totalPages = this.pages // 总页数
    const visiblePages = 5 // 按钮可见的页码数
    const half = Math.floor(visiblePages / 2) // 可见页码数的一半

    // 如果总页数小于可显示页数
    if (totalPages <= visiblePages) {
      for (let i = 1; i <= totalPages; i++) {
        pageList.push(i)
      }
    } else {
      // 如果当前页码小于或等于可见页码数的一半
      if (currentPage <= half) {
        for (let i = 1; i <= visiblePages; i++) {
          pageList.push(i)
        }
      } else if (currentPage >= totalPages - half) {
        // 如果当前页码大于等于最后一页减去可见页码数的一半
        for (let i = totalPages - visiblePages + 1; i <= totalPages; i++) {
          pageList.push(i)
        }
      } else {
        for (let i = currentPage - half; i <= currentPage + half; i++) {
          pageList.push(i)
        }
      }
    }

    this.pageList = pageList
  }
}

ページネーション切り替え

コンポーネントの Pagination.vue へのページング切り替えイベント。このイベントは、PaginationItem.vue サブコンポーネントによってトリガーされ、切り替えられたページ番号をパラメーターとして渡す必要があります。
4. Pagination.vue では、現在のページ番号を更新するために新しいメソッド nextPage を追加する必要があります。同時に、現在のページのインデックスを取得するために計算属性 currentIndex を導入する必要もあります。コードは次のとおりです。

methods: {
  // 点击页码时触发
  handlePageChange (pageNum) {
    // 如果页码为负数或者大于总页数都停止执行
    if (pageNum <= 0 || pageNum > this.pages) return

    this.currentPage = pageNum
    this.$emit('change-page', pageNum) // 事件广播向父组件传值
    this.getPageList(pageNum)
  },
  // 增加当前页码
  nextPage () {
    if (this.currentIndex < this.pages - 1) {
      this.currentPage++
      this.getPageList(this.currentPage)
      this.$emit('change-page', this.currentPage) // 事件广播向父组件传值
    }
  }
},
computed: {
  currentIndex () { // 当前页码所在的索引
    return this.currentPage - 1
  }
}

ページ番号選択ドロップダウン ボックス

ユーザーが各ページに表示されるレコード数を簡単に切り替えられるようにするには、次のものが必要です。ドロップダウン ボックス コンポーネントを実装します。このコンポーネントは、SelectPerPage.vue ファイルによって実装される必要があります。
5. SelectPerPage.vue の内容は次のとおりです。

<template>
  <div class="select-per-page">
    <select :value="perPage" @change="changePerPage">
      <option v-for="item in items" :value="item">{{ item }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    perPage: { // 每页展示条数
      type: Number,
      required: true
    },
    options: { // 可选的条数设置
      type: Array,
      default () {
        return [10, 20, 30, 50]
      }
    }
  },
  computed: {
    items () {
      return this.options.map(option => `${option} 条`)
    }
  },
  methods: {
    // 切换每页展示的条数
    changePerPage (event) {
      const perPage = +event.target.value.replace(/[D]/g, '')

      this.$emit('update:perPage', perPage)
      this.$emit('change-per-page', perPage) // 事件广播向父组件传值
    }
  }
}
</script>

上記は、ページング コンポーネントを実装するための Vue の内容全体です。親コンポーネントに Pagination.vue を導入し、currentPage、total、perPage などの対応するパラメーターを渡す必要があります。このようにして、再利用可能なページング コンポーネントを実装でき、フロントエンド開発の効率と開発エクスペリエンスが向上します。

以上がVueでページングコンポーネントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。