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 中创建分页状态 首先,在 Vuex 状态管理中创建分页状态,该状态将存储每页的记录数、当前页码和…...
类 和 对象(二)
构造方法 接上篇,若每次都想下面的setDate方法给对象初始化,未免比较麻烦,那有什么方法可以让初始化更加简便呢? 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(代码审计) 题目 访问source.php <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["source">"source.php","hint">"hint.php…...
力扣爆刷第145天之图论五连刷(dfs和bfs)
力扣爆刷第145天之图论五连刷(dfs和bfs) 文章目录 力扣爆刷第145天之图论五连刷(dfs和bfs)总结一、797. 所有可能的路径二、200. 岛屿数量三、695. 岛屿的最大面积四、1020. 飞地的数量五、130. 被围绕的区域 总结 dfs是一条路走…...
Host头攻击-使用加密和身份验证机制
使用加密和身份验证机制,即安装合适的安全工具和软件,是确保Web服务器安全性的重要步骤。这种方法涉及使用各种安全工具来检测、预防、监控和响应潜在的安全威胁。以下是对第6种方法的详细讲解,包括一些常见的安全工具和软件的示例。 1. 防火…...
衍生品赛道的 UniSwap:SynFutures 或将成为行业领军者
经过一个周期的发展,DeFi 已经成为基于区块链构建的最成功的去中心化应用,并彻底改变了加密市场的格局。加密货币交易开始逐步从链下转移到链上,并从最初简单的 Swap 到涵盖借贷、Staking、衍生品交易等广泛的生态系统。 在 DeFi 领域&#x…...
TypeScript中的`let`、`const`、`var`区别:变量声明的规范与实践
TypeScript中的let、const、var区别:变量声明的规范与实践 引言 在TypeScript中,变量声明是代码编写的基础部分。let、const、var 是三种用于变量声明的关键字,它们各自有不同的作用域规则和可变性特点。 基础知识 作用域:变量…...
【python】python商家会员数据分析可视化(源码+数据集+课程报告论文)
👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…...
Python限制输入的数范围
在Python中,我们可以使用多种方法来限制用户输入的数值范围。 1.使用while循环和try-except语句的方法 以下是一个使用while循环和try-except语句的示例,该示例将要求用户输入一个在指定范围内的整数。 假设我们要限制用户输入的数在1到100之间&#…...
postman都有哪些功能?
接口测试 可以方便地发送 HTTP 请求,包括各种方法(GET、POST、PUT、DELETE 等),并查看响应结果。 参数设置 能够灵活设置请求的参数,如查询参数、请求头、请求体等。 环境管理 支持创建不同的环境,方便…...
华为ensp中USG6000V防火墙双机热备VRRP+HRP原理及配置
作者主页:点击! ENSP专栏:点击! 创作时间:2024年5月6日20点26分 💯趣站推荐💯 前些天发现了一个巨牛的🤖人工智能学习网站,通俗易懂,风趣幽默,忍…...
ROS for LabVIEW:实现LabVIEW与ROS的无缝集成
ROS for LabVIEW是由Tufts大学开发的一套VI集合,旨在实现LabVIEW与ROS(Robot Operating System)的无缝集成。ROS是一个灵活的机器人软件框架,而LabVIEW则是一种强大的图形化编程工具。这个工具包的推出使得LabVIEW用户能够直接与R…...
yolov8+ROS+ubuntu18.04——学习记录
参考文献 1.Ubuntu配置Yolov8环境并训练自己的数据集 ROS实时运行 2.https://juejin.cn/post/7313979467965874214 前提: 1.CUDA和Anaconda,PyTorch 2.python>3.8 一、创建激活环境,安装依赖 1.创建虚拟环境 conda create -n yol…...
Java小抄(一)|Java中的List与Set转换
文章目录 List和Set的区别线程安全的区别相互转换List->SetSet->List List和Set的区别 在Java中,List和Set都是集合接口,它们之间有几个关键的区别: 重复元素: List允许重复元素,可以存储相同的元素多次。Set…...
【每日随笔】小人畏威不怀德 , 君子畏德不畏威 ( 先礼后兵 )
文章目录 一、小人畏威不怀德1、小人畏威不怀德2、小人场景一3、小人场景二 二、君子畏德不畏威三、先礼后兵 一、小人畏威不怀德 1、小人畏威不怀德 如果 友善 的对待 小人 , 这种人 认知低 且 素质差 , 小人 会将你的 " 友善 " 理解为 " 屈服 " , 他会认…...
不一样的2024
当我们继续往前走时,发现身边的事物不再那么的陌生,也不再那边多的阻碍,不管怎么,2024将会不一样。 当我们走进审批流时,全面石荒芜的,所以自己构建了一个体系。 当我们转向开源时,发现开源与…...
linux mv操作和cp操作
mv 和 cp 是 Linux 系统中用于移动和复制文件或文件夹的两个常用命令,它们之间的主要区别在于: mv(move):mv 命令用于移动文件或文件夹,将它们从一个位置移动到另一个位置。移动后,原始文件或文…...
第十二届蓝桥杯物联网试题(国赛)
不得不说国赛相比较省赛而言确实,功能变得更加复杂,更加繁琐,特别是串口LORA通信相结合的更加频繁,且对收取的字符处理要求要更加复杂,处理判别起来会更加复杂。 对于收发数据本身来说,收发的数据本身是以…...
小而美的前端库推荐
小而美,指的是“小即是美”的事物,这是马云在 2009年 APEC 中小企业峰会上首次提出的观点 👍 前端有很多小而美的库,接入成本很低又能满足日常开发需求 🎉...
【LeetCode】力扣第 399 场周赛 优质数对的总数 II
文章目录 1. 优质数对的总数 II 1. 优质数对的总数 II 题目链接 🍎该题涉及的小技巧:🐥 🐧①一次可以统计这个数的 两个因子 但是要注意 25 5 * 5,这种情况 5 只能统计一次噢🆒 解题思路: 🐧…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
