Comment implémenter le composant de pagination dans Vue ?

Vue est un excellent framework front-end lors du traitement de grandes quantités de données, les composants de pagination sont essentiels. Le composant de pagination peut rendre la page plus ordonnée et également améliorer l'expérience utilisateur. Dans Vue, implémenter un composant de pagination n'est pas compliqué. Cet article présentera comment Vue implémente un composant de pagination.

1. Analyse des exigences

Avant de mettre en œuvre le composant de pagination, nous devons analyser les exigences. Un composant de pagination de base doit avoir les fonctions suivantes :

1. Afficher le numéro de page actuel, le nombre total de pages et le nombre d'éléments affichés sur chaque page
2. Cliquez sur le bouton de pagination pour passer à différents numéros de page
3. Afficher le données de la page actuelle
4. Le numéro de la page actuelle est élevé. Surligner
5. Afficher le sélecteur de numéro de barre de pagination

2. Étapes de mise en œuvre

1. Diviser les fichiers

Pour faciliter la gestion, nous divisons le composant de pagination en trois fichiers :

• Pagination.vue : composant de pagination Le fichier principal est principalement responsable de la logique et du traitement des événements.
• PaginationItem.vue : Un sous-composant du composant de pagination, principalement responsable du rendu du bouton de pagination.
• SelectPerPage.vue : composant de sélection d'éléments de pagination, principalement responsable du rendu de la liste déroulante de sélection d'éléments et de la gestion des événements de modification.

2. Liaison des données de pagination

Nous devons définir certaines variables pour stocker les données liées à la pagination, notamment le numéro de page actuel, le nombre d'éléments par page et le nombre total de pages. Ces variables doivent être définies dans Pagination.vue. Dans le même temps, nous devons également introduire un attribut props pour recevoir les données transmises par le composant parent.

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)
  }
}

3. Rendu du bouton de pagination

Nous divisons le bouton de pagination en un sous-composant, qui est principalement utilisé pour restituer le bouton de pagination et gérer les événements de changement de pagination. Le contenu de PaginationItem.vue est le suivant :

<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>

Dans Pagination.vue, nous devons utiliser la directive v-for pour restituer plusieurs composants PaginationItem.vue. Le nombre de pages doit être généré selon certaines règles. Pour cette règle, vous pouvez vous référer au code suivant :

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
  }
}

4. Changement de pagination

Nous devons lier l'événement de changement de pagination au composant Pagination.vue. Cet événement doit être déclenché par le sous-composant PaginationItem.vue et transmettre le numéro de page commuté en paramètre.

Dans Pagination.vue, nous devons ajouter une nouvelle méthode nextPage pour mettre à jour le numéro de page actuel. Dans le même temps, nous devons également introduire un attribut calculé currentIndex pour obtenir l'index de la page en cours. Le code est le suivant :

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
  }
}

5. Boîte déroulante de sélection du numéro de page

Afin de permettre aux utilisateurs de changer le nombre d'enregistrements affichés sur chaque page, nous devons implémenter un composant de liste déroulante. Ce composant doit être implémenté par le fichier SelectPerPage.vue. Le contenu de

SelectPerPage.vue est le suivant :

<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>

Ce qui précède est tout le contenu de Vue pour implémenter le composant de pagination. Nous devons introduire Pagination.vue dans le composant parent, puis transmettre les paramètres correspondants tels que currentPage, total et perPage. De cette manière, un composant de pagination réutilisable peut être implémenté, ce qui améliore l'efficacité et l'expérience de développement du développement front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!