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/n/296240.html
赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝小蓝
0
上一篇 2024-12-27 12:58
下一篇 2024-12-27 12:58

相关推荐

  • 使用Vue实现前端AES加密并输出为十六进制的方法

    在前端开发中，数据传输的安全性问题十分重要，其中一种保护数据安全的方式是加密。本文将会介绍如何使用Vue框架实现前端AES加密并将加密结果输出为十六进制。 一、AES加密介绍 AE…

    编程 2025-04-29

  • jQuery Datatable分页中文

    jQuery Datatable是一个非常流行的数据表插件，它可以帮助您快速地在页面上创建搜索、过滤、排序和分页的数据表格。不过，它的默认设置是英文的，今天我们就来探讨如何将jQu…

    编程 2025-04-29

  • Vue TS工程结构用法介绍

    在本篇文章中，我们将从多个方面对Vue TS工程结构进行详细的阐述，涵盖文件结构、路由配置、组件间通讯、状态管理等内容，并给出对应的代码示例。 一、文件结构 一个好的文件结构可以极…

    编程 2025-04-29

  • Vue3的vue-resource使用教程

    本文将从以下几个方面详细阐述Vue3如何使用vue-resource。 一、安装Vue3和vue-resource 在使用vue-resource前，我们需要先安装Vue3和vue…

    编程 2025-04-27

  • ThinkPHP6 + Vue.js: 不使用Fetch的数据请求方法

    本文将介绍如何在ThinkPHP6和Vue.js中进行数据请求，同时避免使用Fetch函数。 一、AJAX：XMLHttpRequest的基础使用 在进行数据请求时，最基础的方式就…

    编程 2025-04-27

  • Vue模拟按键按下

    本文将从以下几个方面对Vue模拟按键按下进行详细阐述： 一、Vue 模拟按键按下的场景 在前端开发中，我们常常需要模拟按键按下的场景，比如在表单中填写内容后，按下“回车键”提交表单…

    编程 2025-04-27

  • 开发前端程序，Vue是否足够？

    Vue是一个轻量级，高效，渐进式的JavaScript框架，用于构建Web界面。开发人员可以使用Vue轻松完成前端编程，开发响应式应用程序。然而，当涉及到需要更大的生态系统，或利用…

    编程 2025-04-27

  • 如何在Vue中点击清除SetInterval

    在Vue中点击清除SetInterval是常见的需求之一。本文将介绍如何在Vue中进行这个操作。 一、使用setInterval和clearInterval 在Vue中，使用set…

    编程 2025-04-27

  • uniapp分页第二次请求用法介绍

    本文将从多个方面对uniapp分页第二次请求进行详细阐述，并给出对应的代码示例。 一、请求参数的构造 在进行分页请求时，需要传递的参数体包含当前页码以及每页显示的数据量。对于第二次…

    编程 2025-04-27

  • Linux sync详解

    一、sync概述 sync是Linux中一个非常重要的命令，它可以将文件系统缓存中的内容，强制写入磁盘中。在执行sync之前，所有的文件系统更新将不会立即写入磁盘，而是先缓存在内存…

    编程 2025-04-25

发表回复

登录后才能评论