使用axios请求分页

npm install axios

<template><div><el-table :data="items" style="width: 100%"><el-table-column prop="id" label="ID" /><el-table-column prop="name" label="名称" /><!-- 添加其他列 --></el-table><el-pagination@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize":total="totalItems"layout="total, prev, pager, next, jumper"/></div>
</template><script>
import axios from 'axios';export default {data() {return {items: [],currentPage: 1,pageSize: 10,totalItems: 0,};},methods: {async fetchData(page) {try {const response = await axios.get(`/api/items`, {params: {page: page,limit: this.pageSize,},});// 假设后端返回的数据结构如下this.items = response.data.items;this.totalItems = response.data.totalItems; // 确保后端返回总条目数} catch (error) {console.error('Error fetching data:', error);}},handleCurrentChange(newPage) {this.currentPage = newPage;this.fetchData(newPage);},},mounted() {this.fetchData(this.currentPage); // 初始化数据},
};
</script><style scoped>
/* 自定义样式 */
</style>

后端接口示例

确保你的后端 API 可以处理如下的 GET 请求,并返回相应的数据:

GET /api/items?page=1&limit=10

示例响应:

{

  "totalItems": 50,

  "items": [

       { "id": 1, "name": "Item 1" },

       { "id": 2, "name": "Item 2" }

       // 更多项

    ]

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/460444.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot的在线医疗问答平台

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

codeforces _ 补题

C. Ball in Berland 传送门&#xff1a;Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a;容斥原理 考虑 第 i 对情侣组合 &#xff0c;男生为 a &#xff0c;女生为 b &#xff0c;那么考虑与之匹配的情侣 必须没有 a | b &#xff0c;一共有 k 对情侣&#x…

【Canvas与图标】长方形牛皮纸文件袋图标

【成图】 120*120的图标 大图 小图&#xff1a; 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>长方文件袋图标</title>…

奔走相告! ClickHouse 全新构建了强大的 JSON 数据类型

本文字数&#xff1a;8969&#xff1b;估计阅读时间&#xff1a;23 分钟 作者&#xff1a;Pavel Kruglov 本文在公众号【ClickHouseInc】首发 简介 JSON 已成为现代数据系统中处理半结构化和非结构化数据的首选格式。无论是在日志记录和可观测性 (observability) 应用场景、实…

统信UOS下启动图形界面应用工具manager报错:No protocol specified的解决办法

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、问题情况 达梦提供了丰富的图形界面工具&#xff0c;包括&#xff1a;manager、monitor、dbca等&#xff0c;但在统信操作系统进入终端去启动manager时报错&#xff1a;No protocol specified。 咨询了达…

【CSS3】css开篇基础(6)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

【设计模式系列】迭代器模式(七)

一、什么是迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供一种方法来顺序访问一个聚合对象中的各个元素&#xff0c;而不暴露其内部的表示。迭代器模式将集合的遍历过程封装在一个独立的迭代器对象中&#xff0c;这样…

Linux线程安全(二)条件变量实现线程同步

目录 条件变量 条件变量初始化和唤醒 键盘触发条件变量唤醒线程demo 条件变量的等待 条件变量定时等待demo 条线变量实现多线程间的同步 条件变量 条件变量是为了控制多个线程的同步工作而设计的 比如说一个系统中有多个线程的存在但有且仅有一个线程在工作&#xff0c…

数据结构---顺序表

文章目录 线性表顺序表的使用及其内部方法ArrayList 的扩容机制顺序表的几种遍历方式顺序表的优缺点顺序表的模拟实现杨辉三角扑克牌算法 线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&a…

大模型,多模态大模型面试【LoRA,分类,动静态数据类型,DDPM,ControlNet,IP-Adapter, Stable Diffusion】

大模型&#xff0c;多模态大模型面试【LoRA&#xff0c;分类&#xff0c;动静态数据类型&#xff0c;DDPM&#xff0c;ControlNet&#xff0c;IP-Adapter, Stable Diffusion】 问题一&#xff1a;LoRA是用在节省资源的场景下&#xff0c;那么LoRA具体是节省了内存带宽还是显存呢…

【力扣刷题实战】相同的树

大家好&#xff0c;我是小卡皮巴拉 文章目录 目录 力扣题目&#xff1a; 相同的树 题目描述 示例 1&#xff1a; 示例 2&#xff1a; 示例 3&#xff1a; 解题思路 题目理解 算法选择 具体思路 解题要点 完整代码&#xff08;C语言&#xff09; 兄弟们共勉 &#…

2024年AI绘画与写作工具排行榜:提升创作效率必备利器推荐

2024年&#xff0c;AI绘画和写作工具迎来全新突破&#xff0c;从艺术创作到内容写作&#xff0c;越来越多的创作者开始依赖AI工具来提升效率、拓展创意。而随着市场上AI工具的增多&#xff0c;如何选择适合的工具变得尤为重要。今天为大家推荐一些提升创作效率的AI绘画和写作利…

沈阳乐晟睿浩科技有限公司抖音小店新篇章

在当今数字化时代&#xff0c;电商行业如雨后春笋般迅速崛起&#xff0c;其中抖音小店凭借其庞大的用户基础、精准的推荐算法和便捷的购物体验&#xff0c;成为了电商领域的新宠。在这场电商变革中&#xff0c;沈阳乐晟睿浩科技有限公司&#xff08;以下简称“乐晟睿浩”&#…

SQL语言基础

SQL(Struct Query Language)是结构化查询语言的简称&#xff0c;是一种在关系型数据库中定义和操纵数据的标准语言。 不要使用面向对象的思想学习SQL&#xff0c;因为它不是面向对象的语言目标 SQL语言简介(了解)从数据库数据检索数据(重点)子查询(重点)Oracle常用函数(掌握) …

VBox增强功能、VBoxLinuxAdditions安装、共享文件夹问题解决

VBox增强功能、VBoxLinuxAdditions安装、共享文件夹问题解决 文章目录 VBox增强功能、VBoxLinuxAdditions安装、共享文件夹问题解决1.VBoxLinuxAdditions.run&#xff1a;找不到命令解决方案 2.可以看到共享文件夹。但是不能看到里面的内容。解决方案 参考 共享文件夹设置&…

一、在cubemx下RTC配置调试实例测试

一、rtc的时钟有lse提供。 二、选择rtc唤醒与闹钟功能 内部参数介绍 闹钟配置 在配置时间时&#xff0c;注意将时间信息存储起来&#xff0c;防止复位后时间重新配置。 if(HAL_RTCEx_BKUPRead(&hrtc, RTC_BKP_DR0)! 0x55AA)//判断标志位是否配置过&#xff0c;没有则进…

MySQL 复合索引测试

对MySQL复合索引结合具体示例&#xff0c;各条件下索引使用情况的运行结果及分析。 目录 复合索引示例 创建表 新增数据 查询数据 选项A SQL查询 explain分析 选项B SQL查询 explain分析 选项C SQL查询 explain分析 选项D SQL查询 explain分析 选项E SQL查询…

JavaFx -- chapter05(多用户服务器)

chapter05(线程池-多用户服务器) 教学与实践目的 学会服务器支持多用户并发访问的程序设计技术。 多用户服务器是指服务器能同时支持多个用户并发访问服务器所提供的服务资源&#xff0c;如聊天服务、文件传输等。 第二讲的TCPServer是单用户版本&#xff0c;每次只能和一个…

初体验鸿蒙 HarmonyOS NEXT开发

上个星期三就下载了鸿蒙 HarmonyOS NEXT&#xff0c;安装好了后测试了一下&#xff0c;感觉界面和功能设计与IntelliJ IDEA很像&#xff0c;对初学者非常友好&#xff0c;所见即所得。不知道什么原因&#xff0c;写了代码后测试起来很慢&#xff0c;简单测试后就没有再动。 今天…

《DIY项目之“一只眼狗链”》:视频方案

项目背景 《DIY项目之“一只眼狗链”》合集主要记录完成一个DIY项目的所有过程。该合集预计更新频率为2~3周一篇&#xff08;同样属于一边做一边记录发布&#xff0c;时间上主要涉及PCB绘板、零部件采购、样品制作、编程等&#xff0c;存在一定的不可控性&#xff09;。 当前项…