当前位置: 首页 > news >正文

vue中分页查询的实现

在 Vue 中实现分页查询可以提升大型数据集的加载和显示效率。本文将逐步介绍如何使用 Vuex 状态管理和 axios HTTP 请求库来实现 Vue 分页查询。

1. 在 Vuex 中创建分页状态

首先,在 Vuex 状态管理中创建分页状态,该状态将存储每页的记录数、当前页码和正在加载数据的布尔值。例如:

const state = {currentPage: 1,pageSize: 10,isLoading: false,
}

2. 获取数据并更新状态

接下来,在组件的方法中使用 axios 向服务器发送 HTTP 请求以获取数据。在请求之前,将 isLoading 状态设置为 true,以在数据加载期间显示加载指示器。

async fetchRecords() {this.isLoading = true;const res = await axios.get(`/api/records?page=${this.currentPage}&size=${this.pageSize}`);this.records = res.data;this.isLoading = false;
}

3. 创建分页器组件

创建分页器组件来控制分页行为。该组件应提供导航按钮以在不同页面之间移动。

<template><nav><button>上页</button><button>下页</button></nav></template><script>
export default {methods: {prevPage() {if (this.currentPage > 1) this.currentPage--;},nextPage() {if (this.currentPage < this.totalPages) this.currentPage++;},},
}
</script>

4. 监听状态变化并重新获取数据

在组件中监听 currentPage 或 pageSize 状态变化,并在值发生变化时重新获取数据。

watch: {currentPage() {this.fetchRecords();},pageSize() {this.currentPage = 1;this.fetchRecords();},
}

5. 在视图中使用分页数据

最后,在视图中使用分页后的数据。例如,可以使用 v-for 指令来遍历记录并将其显示在表格中。

<div v-if="!isLoading"><table>
<thead><tr>
<th>ID</th><th>名称</th></tr></thead>
<tbody><tr v-for="record in records" :key="record.id">
<td>{{ record.id }}</td><td>{{ record.name }}</td></tr></tbody>
</table>
</div>

相关文章:

vue中分页查询的实现

在 Vue 中实现分页查询可以提升大型数据集的加载和显示效率。本文将逐步介绍如何使用 Vuex 状态管理和 axios HTTP 请求库来实现 Vue 分页查询。 1. 在 Vuex 中创建分页状态 首先&#xff0c;在 Vuex 状态管理中创建分页状态&#xff0c;该状态将存储每页的记录数、当前页码和…...

类 和 对象(二)

构造方法 接上篇&#xff0c;若每次都想下面的setDate方法给对象初始化&#xff0c;未免比较麻烦&#xff0c;那有什么方法可以让初始化更加简便呢&#xff1f; public void setDate(int year, int month, int day){this.year year;this.month month;this.day day;}答&#…...

buu[HCTF 2018]WarmUp(代码审计)

buu[HCTF 2018]WarmUp&#xff08;代码审计&#xff09; 题目 访问source.php <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["source">"source.php","hint">"hint.php…...

力扣爆刷第145天之图论五连刷(dfs和bfs)

力扣爆刷第145天之图论五连刷&#xff08;dfs和bfs&#xff09; 文章目录 力扣爆刷第145天之图论五连刷&#xff08;dfs和bfs&#xff09;总结一、797. 所有可能的路径二、200. 岛屿数量三、695. 岛屿的最大面积四、1020. 飞地的数量五、130. 被围绕的区域 总结 dfs是一条路走…...

Host头攻击-使用加密和身份验证机制

使用加密和身份验证机制&#xff0c;即安装合适的安全工具和软件&#xff0c;是确保Web服务器安全性的重要步骤。这种方法涉及使用各种安全工具来检测、预防、监控和响应潜在的安全威胁。以下是对第6种方法的详细讲解&#xff0c;包括一些常见的安全工具和软件的示例。 1. 防火…...

衍生品赛道的 UniSwap:SynFutures 或将成为行业领军者

经过一个周期的发展&#xff0c;DeFi 已经成为基于区块链构建的最成功的去中心化应用&#xff0c;并彻底改变了加密市场的格局。加密货币交易开始逐步从链下转移到链上&#xff0c;并从最初简单的 Swap 到涵盖借贷、Staking、衍生品交易等广泛的生态系统。 在 DeFi 领域&#x…...

TypeScript中的`let`、`const`、`var`区别:变量声明的规范与实践

TypeScript中的let、const、var区别&#xff1a;变量声明的规范与实践 引言 在TypeScript中&#xff0c;变量声明是代码编写的基础部分。let、const、var 是三种用于变量声明的关键字&#xff0c;它们各自有不同的作用域规则和可变性特点。 基础知识 作用域&#xff1a;变量…...

【python】python商家会员数据分析可视化(源码+数据集+课程报告论文)

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…...

Python限制输入的数范围

在Python中&#xff0c;我们可以使用多种方法来限制用户输入的数值范围。 1.使用while循环和try-except语句的方法 以下是一个使用while循环和try-except语句的示例&#xff0c;该示例将要求用户输入一个在指定范围内的整数。 假设我们要限制用户输入的数在1到100之间&#…...

postman都有哪些功能?

接口测试 可以方便地发送 HTTP 请求&#xff0c;包括各种方法&#xff08;GET、POST、PUT、DELETE 等&#xff09;&#xff0c;并查看响应结果。 参数设置 能够灵活设置请求的参数&#xff0c;如查询参数、请求头、请求体等。 环境管理 支持创建不同的环境&#xff0c;方便…...

华为ensp中USG6000V防火墙双机热备VRRP+HRP原理及配置

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月6日20点26分 &#x1f4af;趣站推荐&#x1f4af; 前些天发现了一个巨牛的&#x1f916;人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍…...

ROS for LabVIEW:实现LabVIEW与ROS的无缝集成

ROS for LabVIEW是由Tufts大学开发的一套VI集合&#xff0c;旨在实现LabVIEW与ROS&#xff08;Robot Operating System&#xff09;的无缝集成。ROS是一个灵活的机器人软件框架&#xff0c;而LabVIEW则是一种强大的图形化编程工具。这个工具包的推出使得LabVIEW用户能够直接与R…...

yolov8+ROS+ubuntu18.04——学习记录

参考文献 1.Ubuntu配置Yolov8环境并训练自己的数据集 ROS实时运行 2.https://juejin.cn/post/7313979467965874214 前提&#xff1a; 1.CUDA和Anaconda&#xff0c;PyTorch 2.python>3.8 一、创建激活环境&#xff0c;安装依赖 1.创建虚拟环境 conda create -n yol…...

Java小抄(一)|Java中的List与Set转换

文章目录 List和Set的区别线程安全的区别相互转换List->SetSet->List List和Set的区别 在Java中&#xff0c;List和Set都是集合接口&#xff0c;它们之间有几个关键的区别&#xff1a; 重复元素&#xff1a; List允许重复元素&#xff0c;可以存储相同的元素多次。Set…...

【每日随笔】小人畏威不怀德 , 君子畏德不畏威 ( 先礼后兵 )

文章目录 一、小人畏威不怀德1、小人畏威不怀德2、小人场景一3、小人场景二 二、君子畏德不畏威三、先礼后兵 一、小人畏威不怀德 1、小人畏威不怀德 如果 友善 的对待 小人 , 这种人 认知低 且 素质差 , 小人 会将你的 " 友善 " 理解为 " 屈服 " , 他会认…...

不一样的2024

当我们继续往前走时&#xff0c;发现身边的事物不再那么的陌生&#xff0c;也不再那边多的阻碍&#xff0c;不管怎么&#xff0c;2024将会不一样。 当我们走进审批流时&#xff0c;全面石荒芜的&#xff0c;所以自己构建了一个体系。 当我们转向开源时&#xff0c;发现开源与…...

linux mv操作和cp操作

mv 和 cp 是 Linux 系统中用于移动和复制文件或文件夹的两个常用命令&#xff0c;它们之间的主要区别在于&#xff1a; mv&#xff08;move&#xff09;&#xff1a;mv 命令用于移动文件或文件夹&#xff0c;将它们从一个位置移动到另一个位置。移动后&#xff0c;原始文件或文…...

第十二届蓝桥杯物联网试题(国赛)

不得不说国赛相比较省赛而言确实&#xff0c;功能变得更加复杂&#xff0c;更加繁琐&#xff0c;特别是串口LORA通信相结合的更加频繁&#xff0c;且对收取的字符处理要求要更加复杂&#xff0c;处理判别起来会更加复杂。 对于收发数据本身来说&#xff0c;收发的数据本身是以…...

小而美的前端库推荐

小而美&#xff0c;指的是“小即是美”的事物&#xff0c;这是马云在 2009年 APEC 中小企业峰会上首次提出的观点 &#x1f44d; 前端有很多小而美的库&#xff0c;接入成本很低又能满足日常开发需求 &#x1f389;...

【LeetCode】力扣第 399 场周赛 优质数对的总数 II

文章目录 1. 优质数对的总数 II 1. 优质数对的总数 II 题目链接 &#x1f34e;该题涉及的小技巧&#xff1a;&#x1f425; &#x1f427;①一次可以统计这个数的 两个因子 但是要注意 25 5 * 5&#xff0c;这种情况 5 只能统计一次噢&#x1f192; 解题思路: &#x1f427…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...