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

news2024/9/27 19:17:11

往期

从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)

引入elementui table

在这里插入图片描述

我们cv饿了么ui的table,就得到一个基础的表格

在这里插入图片描述

我们去请求学生列表的接口,得到真实的数据

api.js接口封装

接口文档

在这里插入图片描述
在这里插入图片描述

书写接口

在这里插入图片描述

使用

在这里插入图片描述
我们打印输出一下
在这里插入图片描述
发现接口调用成功

修改table

我们把我们的每一项和接口对应

在这里插入图片描述
在这里插入图片描述
数据对应
在这里插入图片描述
在这里插入图片描述
渲染成功

表格数据转换

我们的性别和状态显示是有问题的

在这里插入图片描述

我们需要转换一下

在这里插入图片描述
在这里插入图片描述
成功
在这里插入图片描述
状态同理
我们采用三元表达式会更优雅一些
在这里插入图片描述
在这里插入图片描述
完成

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

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

相关文章

docker安装及安装过程中遇到的问题

安装Docker-CE 备注:Docker 安装,请参考 Docker 官⽅⽂档: Install Docker Engine on Ubuntu | Docker Documentation 也可参照如下命令进行快速安装。 Ubuntu 卸载旧版本(视需要) $ sudo apt-get remove docker docker-engin…

Java并发(4)- synchronized与CAS

引言 上一篇文章中我们说过,volatile通过lock指令保证了可见性、有序性以及“部分”原子性。但在大部分并发问题中,都需要保证操作的原子性,volatile并不具有该功能,这时就需要通过其他手段来达到线程安全的目的,在Ja…

因子图--isam相关内容总结

编辑切换为居中添加图片注释,不超过 140 字(可选)编辑切换为居中添加图片注释,不超过 140 字(可选)平方根法--通过平方根的方法,发现矩阵新增加的变量都会出现在最后一行。Givens旋转方法求解Ax…

Linux环境下,java调用C/C++动态库

目录 一、环境准备 1、安装gcc/g 2、下载jdk库并配置运行环境 二、配合Java程序创建C程序的动态库 1、生成要求清单 2、交给C 去实现 (1) 接口函数实现 (2) 创建动态库 (3) 检查动态库是否正常链接 3、测试:Java程序调用C动态库 一、环境准备 既然是同时…

百万级数据以Excel形式导出

(1).主要考虑到两个方面,第一个方面是内存溢出问题,所以选用阿里的EasyExcel因为它对POI进行了封装功能强大;第二个方面是由于excel版本导致Sheet存储容量不一样,cexcel2003(.xls)每个Sheet只能存6万多条数据而cexcel2007(xlsx)能…

【自学Python】Python布尔型(bool)

Python布尔型(bool) Python布尔型(bool)教程 Python 布尔类型也叫 bool 类型,Python 布尔类型取值为 True 和 False。Python bool 类型的 True 表示条件为真, False 表示条件为假。 Python布尔型(bool) Python 中的布尔类型可以当做 整数 来对待&…

LeetCode 287. 寻找重复数难度中等2004

🌈🌈😄😄欢迎来到茶色岛独家岛屿,本期将为大家揭晓LeetCode 287. 寻找重复数难度中等2004,做好准备了么,那么开始吧。🌲🌲🐴🐴一、题目名称LeetCo…

怎么在Gitee(码云)上传一个项目(一分钟)

目录怎么在Gitee(码云)上传一个项目1、工具1.1、Git1.2、新建仓库2、上传流程3、回答上传项目流程中的几个疑问?怎么在Gitee(码云)上传一个项目 1、工具 1.1、Git 在Git官网或者利用镜像下载符合自己电脑操作系统版…

小众企业在选购低代码平台时需要注意什么

编者按:企业个性化定制需求如何实现?本文介绍了小众企业在选择低代码平台需要注意的点,帮助企业选出更合适得的软件平台。关键词:源码交付,数据整合,前后端分离,私有化部署,安全技术…

IB生物笔记:细胞学说

国际学校生物老师从0开始解读IB生物,感兴趣的同学记得收藏哦~IB生物分为SL(standard level)和HL(higher level)SL有6个topic∶细胞生物,分子生物,遗传学,生态学,物种进化以及多样性和人体生理。HL除了上述6个topic外还…

【pat】出租

下面是新浪微博上曾经很火的一张图:一时间网上一片求救声,急问这个怎么破。其实这段代码很简单,index数组就是arr数组的下标,index[0]2 对应 arr[2]1,index[1]0 对应 arr[0]8,index[2]3 对应 arr[3]0&#…

年底清货刻不容缓!3天清空库存的服装老板是怎么做到的?

春节气氛越来越浓厚, 服装人的心情却是越来越着急——眼看着要过年了,气候也马上回暖了,我店里的库存可咋办?做服装零售的老板都知道,大部分时候压垮服装店的不是淡季、不是租金、不是人工费,而是库存积压。…

Java IO流 - 对象序列化和对象反序列化

文章目录序列化对象对象序列化对象反序列化序列化对象 对象序列化 对象序列化概念: 作用:以内存为基准,把内存中的对象存储到磁盘文件中去,称为对象序列化。 使用到的流是对象字节输出流:ObjectOutputStream ObjectOutputStream构…

Navicat远程连接ubuntu数据库

关于这个问题,我看许多博主也给出了解答,但作者此次遇到的问题也是略微特殊,希望其他人遇到同样的问题能得到启发。 首先是MySQL的安装,我是用的是Xubuntu系统,按照ubuntu系统安装MySQL的步骤即可。如下: …

关系运算符shell

关系运算符只支持数字,不支持字符串,除非字符串的值是数字。下表列出了常用的关系运算符,假定变量 a 为 10,变量 b 为 20:运算符说明举例-eq检测两个数是否相等,相等返回 true。[ $a -eq $b ] 返回 false。…

Mask RCNN网络源码解读(Ⅲ) --- FCN网络

目录 1.FCN网络简介 2.FCN-32S 3.FCN-16S 4.FCN-8S 5.膨胀卷积(空洞卷积) 6.pytorch中FCN的实现 6.1 代码地址 1.FCN网络简介 首个端对端的针对像素级预测的全卷积网络。全卷积网络即将分类网络中的全连接层全部替换为卷积层。 从数据可以看出…

微服务自动化管理【etcd快速集群】

概述 1.etcd构建自身高可用集群主要有三种形式: 静态发现 预先已知etcd集群中有哪些节点,在启动时通过–initial-cluster参数直接指定好etcd的各个节点地址 etcd动态发现 静态配置前提是在搭建集群之前已经提前知道各节点的信息,而实际应用中…

使用VS Code创建第一个Flutter工程

一、前言 你可以使用任意文本编辑器,再结合命令行工具来开发 Flutter 应用。然而,我们推荐使用本文接下来介绍的编辑器插件以获取更好的开发体验。这些插件提供了代码补全、代码高亮、widget 辅助编辑的功能,以及为项目的运行和调试提供支持…

【Denial-of-Service on FPGA-based Cloud Infrastructures论文笔记】

基于FPGA的云基础设施拒绝服务摘要引言背景FPGA TechnologyFPGA设计的实现用户设计在AWS的注册用户设计在AWS上的部署基于FPGA的系统攻击与对策客户端的FPGA使用基于云的fpga的使用信息泄露错误注入攻击对策云FPGA上的拒绝服务攻击攻击模型AWS FPGA安全架构AWS EC2 F1强力锤击攻…

@Validated+循环依赖报错

目录 测试demo 回顾下三级缓存 循环依赖bean实例化初始化过程​​​​​​​ 源码解读 实例化myZmTest1 myZmTest1依赖myZmTest2,实例化2去注入 myZmTest2依赖myZmTest1,获取myZmTest1去注入 获取到myZmTest1,继续myZmTest2初始化 m…