Explication détaillée des étapes d'implémentation des composants de pagination dans VUE

Cette fois, je vais vous apporter un guide détaillé étape par étape pour implémenter le composant de pagination dans VUE. Quelles sont les précautions pour implémenter le composant de pagination dans VUE. Voici un cas pratique, voyons. jetez un oeil.

La pagination est une fonction très courante dans le développement WEB, surtout aujourd'hui où les différents front-end et back-end sont séparés. L'API back-end renvoie des données et le front-end calcule la page de pagination. nombre basé sur le nombre de données et le numéro de page actuel pageIndex Le rendu sur la page est déjà une fonction très courante et courante. De la première ère de jquery à l'ère actuelle de divers frameworks front-end, la fonction de pagination est indispensable.

Dans la plupart des cas (essentiellement), la pagination est le traitement de listes de données asynchrones. Ici, nous devons d'abord comprendre le processus de pagination.

Lorsque la quantité de données affichées sur chaque page pageSize et le numéro de page actuel pageIndex sont connus :

• Demandez l'API et renvoyez les données du premier écran (dans pageSize) et la quantité totale de données de toutes les conditions associées

• Transmettez la quantité totale de données au composant de page pour calculer la page numéro et restituez-le sur la page

  
  

• Cliquez sur le numéro de page, envoyez une demande pour obtenir les données du numéro de page et renvoyez le total quantité de données et les entrées de données sous le numéro de page.

  
  

En raison de changements dans les conditions d'obtention des données (en supposant qu'il s'agit d'une recherche et que les mots-clés changent), le décompte est incertain ou il existe une liste déroulante de sélection pour contrôler la quantité de données affichées sur chaque page. , le nombre total de pages est certain. Il doit également changer. Par conséquent, dans de nombreux cas, il est nécessaire de recalculer le numéro de page et de le restituer.

Après avoir compris le processus, il devient simple d'implémenter un composant de pagination dans Vue.

Traitement simple, le style est similaire au composant de pagination de bootstrap. Sur la première page, les boutons de la page précédente et de la page d'accueil sont désactivés ; sur la dernière page, les boutons de la page suivante et de la dernière page sont désactivés ; remplacé par... , le rendu est le suivant :

En raison de changements dans les conditions d'obtention des données (en supposant qu'il s'agit d'une recherche et que les mots-clés changent), le décompte est incertain ou il existe une liste déroulante de sélection pour contrôler la quantité de données affichées sur chaque page. , le nombre total de pages est certain. Il doit également changer. Par conséquent, dans de nombreux cas, il est nécessaire de recalculer le numéro de page et de le restituer.

Après avoir compris le processus, il devient simple d'implémenter un composant de pagination dans Vue.

Traitement simple, le style est similaire au composant de pagination de bootstrap. Sur la première page, les boutons de la page précédente et de la page d'accueil sont désactivés ; sur la dernière page, les boutons de la page suivante et de la dernière page sont désactivés ; remplacé par... , le rendu est le suivant :

Composant de pagination
modèle

<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--prev&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="prev">prev</li>
    <!-- first -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--first&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="first">first</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showPrevMore">...</li>
    <li :class="[&#39;paging-item&#39;, {&#39;paging-item--current&#39; : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showNextMore">...</li>
    <!-- last -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--last&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="last">last</li>
    <!-- next -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--next&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="next">next</li>
  </ul>
</template>

style(scss)

.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more{
      background-color: #fff;
      color: #505050;
    }
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: .75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #0275d8;
      color:#fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
  }
}

javascript

export default {
  name : 'MoPaging',
  //通过props来接受从父组件传递过来的值
  props : {
 
    //页面中的可见页码，其他的以...替代, 必须是奇数
    perPages : { 
      type : Number,
      default : 5 
    },
 
    //当前页码
    pageIndex : {
      type : Number,
      default : 1
    },
 
    //每页显示条数
    pageSize : {
      type : Number,
      default : 10
    },
 
    //总记录数
    total : {
      type : Number,
      default : 1
    },
 
  },
  methods : {
    prev(){
      if (this.index > 1) {
        this.go(this.index - 1)
      }
    },
    next(){
      if (this.index < this.pages) {
        this.go(this.index + 1)
      }
    },
    first(){
      if (this.index !== 1) {
        this.go(1)
      }
    },
    last(){
      if (this.index != this.pages) {
        this.go(this.pages)
      }
    },
    go (page) {
      if (this.index !== page) {
        this.index = page
        //父组件通过change方法来接受当前的页码
        this.$emit(&#39;change&#39;, this.index)
      }
    }
  },
  computed : {
 
    //计算总页码
    pages(){
      return Math.ceil(this.size / this.limit)
    },
 
    //计算页码，当count等变化时自动计算
    pagers () {
      const array = []
      const perPages = this.perPages
      const pageCount = this.pages
      let current = this.index
      const _offset = (perPages - 1) / 2
 
 
      const offset = {
        start : current - _offset,
        end  : current + _offset
      }
 
      //-1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start)
        offset.start = 1
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount)
        offset.end = pageCount
      }
      if (offset.start < 1) offset.start = 1
 
      this.showPrevMore = (offset.start > 1)
      this.showNextMore = (offset.end < pageCount)
 
      for (let i = offset.start; i <= offset.end; i++) {
        array.push(i)
      }
 
      return array
    }
  },
  data () {
    return {
      index : this.pageIndex, //当前页码
      limit : this.pageSize, //每页显示条数
      size : this.total || 1, //总记录数
      showPrevMore : false,
      showNextMore : false
    }
  },
  watch : {
    pageIndex(val) {
      this.index = val || 1
    },
    pageSize(val) {
      this.limit = val || 10
    },
    total(val) {
      this.size = val || 1
    }
  }
}

Utilisez

<template>
  <p class="list">
    <template v-if="count">
      <ul>
        <li v-for="item in items">...</li>
      </ul>
      <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange">
      </mo-paging>
    </template>
  </p>
</template>
<script>
  import MoPaging from './paging'
  export default {
    //显示的声明组件
    components : {
      MoPaging 
    },
    data () {
      return {
        pageSize : 20 , //每页显示20条数据
        currentPage : 1, //当前页码
        count : 0, //总记录数
        items : []
      }
    },
    methods : {
      //获取数据
      getList () {
        //模拟
        let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}`
        this.$http.get(url)
        .then(({body}) => {
 
          //子组件监听到count变化会自动更新DOM
          this.count = body.count
          this.items = body.list
        })
      },
 
      //从page组件传递过来的当前page
      pageChange (page) {
        this.currentPage = page
        this.getList()
      }
    },
    mounted() {
      //请求第一页数据
      this.getList()
    } 
  }
</script>

dans le composant parent. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée du comportement de défilement de Vue-Router

Comment utiliser Particles.js bibliothèque dans vue

Table de données d'opération BootStrap

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!