从0到1完成一个Vue后台管理项目(十一、前端分页实现)

news2024/9/25 17:12:04

往期

从0到1完成一个Vue后台管理项目(一、创建项目)

从0到1完成一个Vue后台管理项目(二、使用element-ui)

从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库)

从0到1完成一个Vue后台管理项目(四、引入axios、配置路由)

从0到1完成一个Vue后台管理项目(五、登录页(表单校验的使用和封装))

从0到1完成一个Vue后台管理项目(五、登录页,mock,token,axios封装)

从0到1完成一个Vue后台管理项目(六、404页)

从0到1完成一个Vue后台管理项目(七、Header、Footer、页面布局)

从0到1完成一个Vue后台管理项目(八、Menu改造完善、子组件创建、配置路由)

从0到1完成一个Vue后台管理项目(九、引入Breadcrumb面包屑,更改bug)

从0到1完成一个Vue后台管理项目(十、列表API封装、Table列表渲染、表格数据转换)

使用elementUI分页组件

在这里插入图片描述

把需要的属性定义出来

接口返回数据
在这里插入图片描述

处理每页显示的条数

这里的前提是后端没处理,如果后端处理的话会传limit,是不需要我们处理的

因为我们操作的数组,那么我们可以用数组的api
slice((当前条数-1)每页条数,当前页数当前条数)

在这里插入图片描述
在这里插入图片描述
实现成功
在这里插入图片描述

用计算属性改造

我们直接在组件里写是不太规范的,所以我们要进行改造
在这里插入图片描述
在这里插入图片描述
完成

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

测试分析--精准分析

测试分析的概念 测试分析是建立在对「需求本身」、「用户使用场景」以及对应的「系统架构」和「实现细节」的充分了解的基础上,通过对数据流、状态变化、逻辑时序、功能/性能/兼容性等方面的分析,得出测试点的过程; 在现阶段敏捷开发模式普遍…

【部分真题】2022年12月QMS质量管理体系试题(1-5题)尚大解析版

注1:由于是机考,题目顺序随机变化,但题目内容所有考生一致。 注2:选择题的选项顺序会随机改变,但选项的内容不变。 注3:为了方便学员学习与复习,已经按教程&考试大纲进行全面优化排序。 注4…

4644. 求和

4644. 求和 https://www.acwing.com/problem/content/description/4647/ 第十三届蓝桥杯省赛CA/C组 , 第十三届蓝桥杯省赛JAVAA组 算法标签:推公式;前缀和 思路 推公式做法: (a1a2a3...an)2a12a22a32...an22a1a22a1a3...2a1an2a2a3...2an−…

【模板】最小生成树(C++)

题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出 orz。 输入格式 第一行包含两个整数 N,MN,MN,M,表示该图共有 NNN 个结点和 MMM 条无向边。 接下来 MMM 行每行包含三个整数 Xi,Yi,ZiX_i,Y_i,…

设计师必备的免费样机素材

很多设计师会用样机模型来展示自己的作品,让设计图案、应用界面等作品应用到实物效果图中,能体现作品的最终效果,更加形象逼真。哪里能下载到样机模板呢?今天我就推荐6个网站帮你解决,赶紧收藏! 1、菜鸟图库…

20230109测试ToyBrick的RK3588开发板运行Buildroot的V0.02版本(20220312)

20230109测试ToyBrick的RK3588开发板运行Buildroot的V0.02版本(20220312) 2023/1/9 18:03 https://wiki.t-firefly.com/zh_CN/Firefly-Linux-Guide/manual_buildroot.html 1. Buildroot 使用手册 1.1. 桌面应用 官方发布的 Buildroot 固件,默…

RabbitMQ学习一【尚硅谷】

一、消息队列 1、MQ的相关概念 2、RabbitMQ 2.1 四大核心概念 生产者: 交换机:交换机是 RabbitMQ非常重要的一个部件,一方面它接收来自生产者的消息,另一方面它将消息 推送到队列中。交换机必须确切知道如何处理它接收到的消息…

一文详解Linux Python3安装

在公司申请了一台CentOS 7的Linux版本虚拟机,需要安装一个Python3的环境,定期进行特定任务处理。这里对CentOS 7配置Python3环境的步骤进行了记录,供大家参考。 本文基于如下Linux系统版本: 一、默认Python版本 默认情况下&am…

Excelize 2.7.0 发布, 2023 年首个更新

Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准。可以使用它来读取、写入由 Microsoft Excel™ 2007 及以上版本创建的电子表格文档。支持 XLAM / XLSM / XLSX / XLTM / XLTX 等多种文档格式&#xf…

C 程序设计教程(13)—— 顺序结构程序设计练习题

C 程序设计教程(13)—— 顺序结构程序设计练习题 该专栏主要介绍 C 语言的基本语法,作为《程序设计语言》课程的课件与参考资料,用于《程序设计语言》课程的教学,供入门级用户阅读。 目录C 程序设计教程(1…

【openGauss】在openEuler(ARM架构)上安装openGauss(一主两备含CM版)

一、系统版本介绍 当前案例中的openGauss安装,底层操作系统为openEuler-20.03-LTS版本,当前openGauss对Python版本兼容性最好的是Python 3.6版本与Python 3.7版本,该实验使用的openEuler版本自带Python 3.7.4,不需要再自行安装 二…

汽车电子系统网络安全活动

声明 本文是学习GB-T 38628-2020 信息安全技术 汽车电子系统网络安全指南. 下载地址 http://github5.com/view/764而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 汽车电子系统网络安全活动 7.1 概念设计阶段 7.1.1 概述 概念设计阶段的活动流程如图…

房产管理系统分布架构分析

一、数图互通房产管理系统采用分布式架构下的高可用设计: (1)可以避免因单点故障造成系统平台宕机: a、负载均衡技术(failover ,选址,硬件负载,软件负载,去中心化负载(g…

tp5处理前端上传的图片文件

前端上传了一个图片文件,tp5框架如何处理 效果图&#xff1a; 效果图一: 效果图二: 如果需要看前端如何展示、删除上传的缩略图请到此篇博客&#xff1a; 前端&#xff1a; <form id"upload_pic_wrap" target"upload_file" enctype"multipar…

任务间通讯

信号量与邮箱 系统中的多个任务在运行时&#xff0c;经常需要互相无冲突地访问同一个共享资源&#xff0c;或者需要互相支持和依赖&#xff0c;甚至有时还要互相加以必要的限制和制约&#xff0c;才保证任务的顺利运行。因此&#xff0c;操作系统必须具有对任务的运行进行协调…

C++11引入的尾置返回类型

C11引入的尾置返回类型一、什么是尾置返回类型(trailing return type)二、尾置返回的典型场景2.1 常规方式如何返回数组指针2.2 使用尾置返回类型三、尾置返回类型的应用四、总结一、什么是尾置返回类型(trailing return type) 我们先来看一下传统的函数是怎么定义的&#xff…

Leetcode N皇后

题目链接 Leetcode.51 N 皇后 Leetcode.52 N皇后 II N皇后 题目描述 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个…

如何在Vue组件中调用封装好的外部js文件方法

文章目录1、前言2、抽离基本业务js3、在具体组件中调用3.1 引入3.2 组件中调用3.3 实现的效果4、实际项目中的运用4.1 核心展示将一些常用的方法&#xff0c;比如字符串格式化呀&#xff0c;时间格式话呀&#xff0c;常用的表单验证方法呀等等。可以抽离出为基础的业务。在组件…

【Linux】echo命令用法详解

作者&#xff1a;柒号华仔 个人主页&#xff1a;欢迎访问我的主页 个人信条&#xff1a;星光不问赶路人,岁月不负有心人。 个人方向&#xff1a;专注于5G领域&#xff0c;同时兼顾其他网络协议&#xff0c;编解码协议&#xff0c;C/C&#xff0c;linux等&#xff0c;感兴趣的小…

【MySQL】帮助的使用,清晰地解析——?/help命令

MySQL帮助的使用为什么需要‘帮助’命令实际使用? contents 命令显示可供查询的分类子类别内容展示查阅帮助&#xff08;show命令的使用&#xff09;show 命令的用法展示各个表状态信息展示一个表的字段信息为什么需要‘帮助’命令 某个操作的语法忘记了&#xff0c;快速查找…