投稿
  1. 簡單一點首頁
  2. 編程

Vue分頁詳解

小藍 • • 編程

一、Vue分頁參數

Vue分頁中，我們需要了解分頁相關的參數，以便配置分頁組件。常用的分頁參數包括：

  1. 當前頁數：用於標識當前顯示的頁碼，可以通過v-model綁定到當前頁數的變數上。
  2. 總記錄數：用於計算總頁數，參與分頁演算法。可以從後端介面獲取。
  3. 每頁顯示數：用於控制每頁顯示的記錄數，也叫分頁大小。
  4. 頁碼範圍：用於控制分頁器上顯示的頁碼數量，通常顯示3~5個頁碼。

代碼示例：

<template>
  <div class="pagination">
    <span>總共 {{ total }} 條記錄</span>
    <ul>
      <li v-if="currentPage>1"><a href="#" @click.prevent="currentPage--"><</a></li>
      <li v-for="page in pages"><a href="#" @click.prevent="currentPage=page">{{ page }}</a></li>
      <li v-if="currentPage<totalPage"><a href="#" @click.prevent="currentPage++">></a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    total: Number,
    pageSize: {
      type: Number,
      default: 10
    },
    range: {
      type: Number,
      default: 3
    },
    currentPage: {
      type: Number,
      default: 1
    },
  },
  computed: {
    totalPage () {
      return Math.ceil(this.total / this.pageSize)
    },
    pages () {
      let from = Math.max(1, this.currentPage - this.range)
      let to = Math.min(this.totalPage, this.currentPage + this.range)
      let pages = []
      for (let i = from; i <= to; i++) {
        pages.push(i)
      }
      return pages
    },
  },
}
</script>

二、Vue分頁面

Vue分頁面是指根據後端介面返回的數據進行前端分頁處理展示。

示例頁面中，我們需要獲取分頁參數後，通過計算得到展示的分頁列表，再將每頁顯示數和當前頁碼作為參數傳遞給後端介面獲取分頁數據。分頁數據獲取後，需要用v-for指令進行循環展示。

代碼示例：

<template>
  <div class="pagination">
    <ul>
      <li v-for="item in pagedData" :key="item.id">{{ item.title }}</li>
    </ul>
    <pagination
      :total="total"
      :pageSize="pageSize"
      @update:currentPage="loadPageData"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      data: []
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    async loadData () {
      // 模擬後端返回數據
      let res = await fetch(`api/data?page=${this.currentPage}&size=${this.pageSize}`)
      let { data, total } = await res.json()
      this.data = data
      this.total = total
    },
    loadPageData (currentPage) {
      this.currentPage = currentPage
      this.loadData()
    }
  },
  computed: {
    pagedData () {
      let start = (this.currentPage - 1) * this.pageSize
      let end = start + this.pageSize
      return this.data.slice(start, end)
    }
  }
}
</script>

三、Vue分頁組件

為了方便重複使用，在Vue中可以封裝成一個組件進行調用。常用的分頁組件包括：element-ui的Pagination、bootstrap-vue的b-pagination、vue-pagination等，這裡以element-ui為例介紹。

element-ui的Pagination組件需要注意的是，它的currentPage屬性要使用v-model綁定。此外，該組件還提供了一個layout屬性，用於自定義分頁器布局，可以通過字元串數組來指定布局元素的位置。

代碼示例：

<template>
  <div>
    <el-pagination
      layout="total,sizes,prev,pager,next,jumper"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      :page-size="pageSize"
      v-model="currentPage"
      @current-change="loadData"
    />
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import { Pagination } from "element-ui";
export default {
  components: {
    [Pagination.name]: Pagination
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      data: []
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    async loadData () {
      // 模擬後端返回數據
      let res = await fetch(`api/data?page=${this.currentPage}&size=${this.pageSize}`)
      let { data, total } = await res.json()
      this.data = data
      this.total = total
    }
  }
}
</script>

四、Vue分頁展示圖片

在Vue分頁過程中，我們可能需要在分頁中展示圖片，可以使用v-bind綁定src屬性，或使用Vue的require方法引入圖片資源。

代碼示例：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      <img :src="item.imageUrl">
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      data: [
        { id: 1, title: 'title1', imageUrl: require('@/assets/img1.jpg') },
        { id: 2, title: 'title2', imageUrl: require('@/assets/img2.jpg') },
        { id: 3, title: 'title3', imageUrl: require('@/assets/img3.jpg') },
        ...
      ]
    }
  }
}
</script>

五、Vue分頁查詢

在Vue分頁中，我們可以添加數據查詢功能，讓用戶根據關鍵字等條件進行數據檢索。對於數據查詢，通常需要向後台伺服器發送請求，並傳遞查詢參數。查詢分頁邏輯需要在後端伺服器進行處理，這裡只展示前端的代碼。

代碼示例：

<template>
  <div>
    <input v-model.trim="keyword" placeholder="請輸入關鍵字">
    <button @click="searchData">搜索</button>

    <el-pagination ... />
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import { Pagination } from "element-ui";
export default {
  components: {
    [Pagination.name]: Pagination
  },
  data () {
    return {
      keyword: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      data: []
    }
  },
  methods: {
    async searchData () {
      // 模擬後端返回數據
      let res = await fetch(`api/data?page=${this.currentPage}&size=${this.pageSize}&keyword=${this.keyword}`)
      let { data, total } = await res.json()
      this.data = data
      this.total = total
    },
    async loadData () {
      // 模擬後端返回數據
      let res = await fetch(`api/data?page=${this.currentPage}&size=${this.pageSize}`)
      let { data, total } = await res.json()
      this.data = data
      this.total = total
    }
  }
}
</script>

六、Vue分頁原理

Vue分頁的原理是通過前端計算獲得分頁數據，這個過程通過計算分頁參數得出分頁器上顯示的頁碼列表，然後根據當前頁碼、每頁顯示數、數據總記錄數等參數計算出當前頁碼的數據索引，再根據索引獲取相關的分頁數據。

代碼示例：

<template>
  <div>
    <ul>
      <li v-for="item in pagedData">{{ item.title }}</li>
    </ul>
    <div v-if="totalPage">
      <button @click="setCurrentPage(1)" :disabled="currentPage === 1">首頁</button>
      <button @click="setCurrentPage(currentPage-1)" :disabled="currentPage === 1">上一頁</button>
      <button
        v-for="page in pages"
        :key="page"
        @click="setCurrentPage(page)"
        :class="{ 'active': page === currentPage }"
      >{{ page }}</button>
      <button @click="setCurrentPage(currentPage+1)" :disabled="currentPage === totalPage">下一頁</button>
      <button @click="setCurrentPage(totalPage)" :disabled="currentPage === totalPage">尾頁</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      data: []
    }
  },
  computed: {
    totalPage () {
      return Math.ceil(this.total / this.pageSize)
    },
    pages () {
      let from = Math.max(1, this.currentPage - 2)
      let to = Math.min(this.totalPage, this.currentPage + 2)
      let pages = []
      for (let i = from; i <= to; i++) {
        pages.push(i)
      }
      return pages
    },
    pagedData () {
      let start = (this.currentPage - 1) * this.pageSize
      let end = start + this.pageSize
      return this.data.slice(start, end)
    }
  },
  methods: {
    setCurrentPage (page) {
      if (page  this.totalPage) {
        return
      }
      this.currentPage = page
      this.loadData()
    },
    async loadData () {
      // 模擬後端返回數據
      let res = await fetch(`data?page=${this.currentPage}&size=${this.pageSize}`)
      let { data, total } = await res.json()
      this.data = data
      this.total = total
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

七、Vue分頁函數

分頁函數是一段封裝好的可以在Vue分頁中重複使用的代碼。

代碼示例：

<template>

<div>

<ul>

<li v-for="item in pagedData">{{ item.title }}</li>

</ul>

<div v-if="totalPage">

<button @click="setCurrentPage(1)" :disabled="currentPage === 1">首頁</button>

<button @click="setCurrentPage(currentPage-1)" :disabled="currentPage === 1">上一頁</button>

<button

v-for="page in pages"

:key="page"

@click="setCurrentPage(page)"

:class="{ 'active': page === currentPage }"

>{{ page }}</button>

<button @click="setCurrentPage(currentPage+1)" :disabled="currentPage === totalPage">下一頁</button>

<button @click="setCurrentPage(totalPage)" :disabled="currentPage === totalPage">尾頁&lt
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/296240.html
贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
0 0
上一篇 2024-12-27 12:58
下一篇 2024-12-27 12:58

相關推薦

  • 使用Vue實現前端AES加密並輸出為十六進位的方法

    在前端開發中，數據傳輸的安全性問題十分重要，其中一種保護數據安全的方式是加密。本文將會介紹如何使用Vue框架實現前端AES加密並將加密結果輸出為十六進位。 一、AES加密介紹 AE…

    FGHAD的頭像 FGHAD
    編程 2025-04-29

  • jQuery Datatable分頁中文

    jQuery Datatable是一個非常流行的數據表插件，它可以幫助您快速地在頁面上創建搜索、過濾、排序和分頁的數據表格。不過，它的默認設置是英文的，今天我們就來探討如何將jQu…

    CXCIN的頭像 CXCIN
    編程 2025-04-29

  • Vue TS工程結構用法介紹

    在本篇文章中，我們將從多個方面對Vue TS工程結構進行詳細的闡述，涵蓋文件結構、路由配置、組件間通訊、狀態管理等內容，並給出對應的代碼示例。 一、文件結構 一個好的文件結構可以極…

    RWFZE的頭像 RWFZE
    編程 2025-04-29

  • Vue3的vue-resource使用教程

    本文將從以下幾個方面詳細闡述Vue3如何使用vue-resource。 一、安裝Vue3和vue-resource 在使用vue-resource前，我們需要先安裝Vue3和vue…

    GPNIG的頭像 GPNIG
    編程 2025-04-27

  • ThinkPHP6 + Vue.js: 不使用Fetch的數據請求方法

    本文將介紹如何在ThinkPHP6和Vue.js中進行數據請求，同時避免使用Fetch函數。 一、AJAX：XMLHttpRequest的基礎使用 在進行數據請求時，最基礎的方式就…

    MAEKN的頭像 MAEKN
    編程 2025-04-27

  • Vue模擬按鍵按下

    本文將從以下幾個方面對Vue模擬按鍵按下進行詳細闡述： 一、Vue 模擬按鍵按下的場景 在前端開發中，我們常常需要模擬按鍵按下的場景，比如在表單中填寫內容後，按下「回車鍵」提交表單…

    TCRAN的頭像 TCRAN
    編程 2025-04-27

  • 開發前端程序，Vue是否足夠？

    Vue是一個輕量級，高效，漸進式的JavaScript框架，用於構建Web界面。開發人員可以使用Vue輕鬆完成前端編程，開發響應式應用程序。然而，當涉及到需要更大的生態系統，或利用…

    PQIYE的頭像 PQIYE
    編程 2025-04-27

  • 如何在Vue中點擊清除SetInterval

    在Vue中點擊清除SetInterval是常見的需求之一。本文將介紹如何在Vue中進行這個操作。 一、使用setInterval和clearInterval 在Vue中，使用set…

    JENEN的頭像 JENEN
    編程 2025-04-27

  • uniapp分頁第二次請求用法介紹

    本文將從多個方面對uniapp分頁第二次請求進行詳細闡述，並給出對應的代碼示例。 一、請求參數的構造 在進行分頁請求時，需要傳遞的參數體包含當前頁碼以及每頁顯示的數據量。對於第二次…

    ZRYYQ的頭像 ZRYYQ
    編程 2025-04-27

  • Linux sync詳解

    一、sync概述 sync是Linux中一個非常重要的命令，它可以將文件系統緩存中的內容，強制寫入磁碟中。在執行sync之前，所有的文件系統更新將不會立即寫入磁碟，而是先緩存在內存…

    BPORF的頭像 BPORF
    編程 2025-04-25

發表回復

登錄後才能評論