Bagaimana untuk melaksanakan komponen paging dalam Vue?

Vue ialah rangka kerja bahagian hadapan yang sangat baik Apabila memproses sejumlah besar data, komponen halaman adalah penting. Komponen penomboran boleh menjadikan halaman lebih kemas dan juga meningkatkan pengalaman pengguna. Dalam Vue, melaksanakan komponen paging tidak rumit Artikel ini akan memperkenalkan cara Vue melaksanakan komponen paging.

1. Analisis keperluan

Sebelum melaksanakan komponen paging, kita perlu menganalisis keperluan. Komponen asas halaman perlu mempunyai fungsi berikut:

1. Paparkan nombor halaman semasa, jumlah bilangan halaman dan bilangan item yang dipaparkan pada setiap halaman
2. Klik butang paging untuk bertukar kepada nombor halaman yang berbeza
3. Paparkan data halaman semasa
4. Nombor halaman semasa adalah Highlight
5. Paparkan pemilih nombor bar paging

2. Langkah-langkah pelaksanaan

1. Bahagikan fail

Untuk memudahkan pengurusan, kami membahagikan komponen paging kepada tiga fail:

Pagination.vue: Komponen penomboran Fail utama bertanggungjawab terutamanya untuk logik dan pemprosesan peristiwa.
• PaginationItem.vue: Subkomponen komponen paging, bertanggungjawab terutamanya untuk memaparkan butang paging.
• SelectPerPage.vue: Komponen pemilih item halaman, bertanggungjawab terutamanya untuk memaparkan kotak lungsur pilihan item dan mengendalikan acara perubahan.

Pengikatan data paging

Kita perlu menentukan beberapa pembolehubah untuk menyimpan data berkaitan paging, termasuk nombor halaman semasa, bilangan item setiap halaman dan jumlah bilangan halaman. Pembolehubah ini harus ditakrifkan dalam Pagination.vue. Pada masa yang sama, kami juga perlu memperkenalkan atribut props untuk menerima data yang diluluskan oleh komponen induk.

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

Memberikan butang paging

Kami membahagikan butang paging kepada sub-komponen, yang digunakan terutamanya untuk memaparkan butang paging dan mengendalikan acara penukaran paging. Kandungan PaginationItem.vue adalah seperti berikut:

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

Dalam Pagination.vue, kita perlu menggunakan arahan v-for untuk menghasilkan berbilang komponen PaginationItem.vue. Bilangan halaman hendaklah dijana mengikut peraturan tertentu Untuk peraturan ini, anda boleh merujuk kepada kod berikut:

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

Penukaran penomboran

Kita perlu mengikat acara pensuisan penomboran kepada komponen Penomboran.vue. Peristiwa ini harus dicetuskan oleh subkomponen PaginationItem.vue dan lulus nombor halaman yang ditukar sebagai parameter.

Dalam Pagination.vue, kami perlu menambah kaedah baharu nextPage untuk mengemas kini nombor halaman semasa. Pada masa yang sama, kami juga perlu memperkenalkan currentIndex atribut yang dikira untuk mendapatkan indeks halaman semasa. Kodnya adalah seperti berikut:

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

Kotak lungsur pilihan nombor halaman

Untuk memudahkan pengguna menukar bilangan rekod yang dipaparkan pada setiap halaman, kita perlu melaksanakan komponen kotak lungsur. Komponen ini harus dilaksanakan oleh fail SelectPerPage.vue. Kandungan

SelectPerPage.vue adalah seperti berikut:

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

Di atas adalah semua kandungan Vue untuk melaksanakan komponen paging. Kita perlu memperkenalkan Pagination.vue dalam komponen induk, dan kemudian lulus parameter yang sepadan seperti currentPage, total dan perPage. Dengan cara ini, komponen paging boleh guna semula boleh dilaksanakan, yang meningkatkan kecekapan dan pengalaman pembangunan pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen paging dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!