Wie implementiert man eine Paging-Komponente in Vue?

Vue ist ein hervorragendes Frontend-Framework. Bei der Verarbeitung großer Datenmengen ist die Paging-Komponente unerlässlich. Die Paginierungskomponente kann die Seite aufgeräumter machen und auch das Benutzererlebnis verbessern. In Vue ist die Implementierung einer Paging-Komponente nicht kompliziert. In diesem Artikel wird erläutert, wie Vue eine Paging-Komponente implementiert.

1. Anforderungsanalyse

Bevor wir die Paging-Komponente implementieren, müssen wir die Anforderungen analysieren. Eine grundlegende Paging-Komponente muss die folgenden Funktionen haben:

1. Anzeige der aktuellen Seitenzahl, der Gesamtzahl der Seiten und der Anzahl der auf jeder Seite angezeigten Elemente
2. Klicken Sie auf die Paging-Schaltfläche, um zu anderen Seitenzahlen zu wechseln.
3. Anzeigen der Daten der aktuellen Seite
4. Die aktuelle Seitenzahl ist hoch Hervorheben
5. Zeigen Sie die Nummernauswahl für die Seitenleiste an

2. Implementierungsschritte

1. Dateien aufteilen

Um die Verwaltung zu erleichtern, teilen wir die Seitenkomponente in drei Dateien auf:

• Pagination.vue: Paginierungskomponente Die Hauptdatei ist hauptsächlich für die Logik und Ereignisverarbeitung verantwortlich.
• PaginationItem.vue: Eine Unterkomponente der Paging-Komponente, die hauptsächlich für die Darstellung der Paging-Schaltfläche verantwortlich ist.
• SelectPerPage.vue: Paging-Elementauswahlkomponente, die hauptsächlich für die Darstellung des Dropdown-Felds für die Elementauswahl und die Verarbeitung von Änderungsereignissen verantwortlich ist.

2. Bindung von Paging-Daten

Wir müssen einige Variablen definieren, um paging-bezogene Daten zu speichern, einschließlich der aktuellen Seitenzahl, der Anzahl der Elemente pro Seite und der Gesamtzahl der Seiten. Diese Variablen sollten in Pagination.vue definiert werden. Gleichzeitig müssen wir auch ein Props-Attribut einführen, um die von der übergeordneten Komponente übergebenen Daten zu empfangen.

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. Rendern der Paging-Schaltfläche

Wir teilen die Paging-Schaltfläche in eine Unterkomponente auf, die hauptsächlich zum Rendern der Paging-Schaltfläche und zum Verarbeiten von Paging-Umschaltereignissen verwendet wird. Der Inhalt von PaginationItem.vue lautet wie folgt:

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

In Pagination.vue müssen wir die v-for-Direktive verwenden, um mehrere PaginationItem.vue-Komponenten zu rendern. Die Anzahl der Seiten sollte nach bestimmten Regeln generiert werden. Für diese Regel können Sie sich auf den folgenden Code beziehen:

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

Wir müssen das Paginierungswechselereignis an die Pagination.vue-Komponente binden. Dieses Ereignis sollte von der Unterkomponente PaginationItem.vue ausgelöst werden und die umgeschaltete Seitennummer als Parameter übergeben.

In Pagination.vue müssen wir eine neue Methode nextPage hinzufügen, um die aktuelle Seitenzahl zu aktualisieren. Gleichzeitig müssen wir auch ein berechnetes Attribut currentIndex einführen, um den Index der aktuellen Seite zu erhalten. Der Code lautet wie folgt:

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. Dropdown-Feld zur Auswahl der Seitennummer

Um Benutzern das Ändern der Anzahl der auf jeder Seite angezeigten Datensätze zu erleichtern, müssen wir eine Dropdown-Feld-Komponente implementieren. Diese Komponente sollte durch die Datei SelectPerPage.vue implementiert werden. Der Inhalt von

SelectPerPage.vue lautet wie folgt:

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

Das Obige ist der gesamte Inhalt von Vue zur Implementierung der Paging-Komponente. Wir müssen Pagination.vue in die übergeordnete Komponente einführen und dann die entsprechenden Parameter wie currentPage, total und perPage übergeben. Auf diese Weise kann eine wiederverwendbare Paging-Komponente implementiert werden, die die Effizienz und das Entwicklungserlebnis der Front-End-Entwicklung verbessert.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine Paging-Komponente in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!