Detaillierte Erläuterung der Schritte zur Implementierung von Paging-Komponenten in VUE

Dieses Mal werde ich Ihnen eine detaillierte Schritt-für-Schritt-Anleitung zur Implementierung der Paging-Komponente in VUE geben. Was sind die Vorsichtsmaßnahmen für die Implementierung der Paging-Komponente in VUE? Schauen Sie mal rein.

Paging ist eine sehr häufige Funktion in der WEB-Entwicklung, insbesondere heute, wenn verschiedene Front-End- und Back-End-Funktionen getrennt sind. Die Back-End-API gibt Daten zurück und das Front-End berechnet die Paging-Seite Zahl basierend auf der Anzahl der Daten und der aktuellen Seitenzahl pageIndex ist bereits eine sehr häufige und häufige Funktion. Von der frühesten JQuery-Ära bis zur aktuellen Ära verschiedener Front-End-Frameworks ist die Paginierungsfunktion unverzichtbar.

In den meisten Fällen handelt es sich beim Paging (im Grunde) um die Verarbeitung asynchroner Datenlisten. Hier müssen wir zunächst den Paging-Prozess verstehen.

Wenn die auf jeder Seite angezeigte Datenmenge pageSize und die aktuelle Seitenzahl pageIndex bekannt sind:

• Fordern Sie die API an und geben Sie die ersten Bildschirmdaten (innerhalb von pageSize) und die Gesamtdatenmenge aller zugehörigen Bedingungen zurück.

• Übergeben Sie die Gesamtdatenmenge an die Seitenkomponente, um die Seite zu berechnen Nummer und rendern Sie sie auf der Seite

  
  

• Klicken Sie auf die Seitenzahl, senden Sie eine Anfrage, um die Daten der Seitenzahl zu erhalten, und geben Sie die Gesamtsumme zurück Anzahl der Daten und die Dateneinträge unter der Seitenzahl.

  
  

Aufgrund von Änderungen in den Bedingungen zum Abrufen von Daten (vorausgesetzt, es handelt sich um eine Suche und die Schlüsselwörter ändern sich) ist die Anzahl unsicher, oder es gibt ein Auswahl-Dropdown-Feld, um die auf jeder Seite angezeigte Datenmenge zu steuern, wenn sie sich ändert , die Gesamtseitenzahl ist sicher Es muss sich auch ändern. Daher muss in vielen Fällen die Seitenzahl neu berechnet und gerendert werden.

Nachdem Sie den Prozess verstanden haben, ist es einfach, eine Paging-Komponente in Vue zu implementieren.

Einfache Verarbeitung, der Stil ähnelt der Paging-Komponente von Bootstrap. Auf der ersten Seite sind die Schaltflächen für die vorherige Seite und die letzte Seite deaktiviert ersetzt durch... , die Darstellung ist wie folgt:

Aufgrund von Änderungen in den Bedingungen zum Abrufen von Daten (vorausgesetzt, es handelt sich um eine Suche und die Schlüsselwörter ändern sich) ist die Anzahl unsicher, oder es gibt ein Auswahl-Dropdown-Feld, um die auf jeder Seite angezeigte Datenmenge zu steuern, wenn sie sich ändert , die Gesamtseitenzahl ist sicher Es muss sich auch ändern. Daher ist es in vielen Fällen notwendig, die Seitenzahl neu zu berechnen und darzustellen.

Nachdem Sie den Prozess verstanden haben, ist es einfach, eine Paging-Komponente in Vue zu implementieren.

Einfache Verarbeitung, der Stil ähnelt der Paging-Komponente von Bootstrap. Auf der ersten Seite sind die Schaltflächen für die vorherige Seite und die letzte Seite deaktiviert ersetzt durch... , die Darstellung ist wie folgt:

Paginierungskomponente
Vorlage

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

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

Verwenden Sie

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

in der übergeordneten Komponente. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erklärung des Scrollverhaltens von Vue-Router

Wie man Particles.js verwendet Bibliothek in Vue

BootStrap-Betriebsdatentabelle

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung von Paging-Komponenten in VUE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!