Element学习(axios异步加载数据、案例操作)(5)

1、这次学习的是上次还未完成好的恶element案例,对列表数据的异步加载,并渲染展示。

——>axios来发送异步请求

(1)

(2)在vue当中安装axios

(注意在当前的项目目录,并且安装完之后再将项目重启一下

(3)这里我用到数据的url地址为:

https://mock.apifox.cn/m1/3128855-0-default/emp/list

2、在当前页面发起异步请求(还要记得导入"import ...")

(1)导入(import)放在标签<script>中

3、什么时候需要通过axios发送异步请求,然后加载数据?

  • 这里就要特别注意vue当中的钩子方法,在里面发送请求。
  • 在Vue.js中,钩子方法(也称为生命周期钩子或生命周期事件)是Vue实例在创建、更新、销毁等关键时刻自动调用的函数
  • 只要vue对象一创建、挂载完成,然后自动发送请求,加载数据。
  • 所以在methods下面再添加一个平级(定义一个钩子方法)——>mounted(){...}

  • 发送异步请求——>get(" ...url地址... "),后面再跟上一个成功的回调函数,直接输入thenc 就会自动生成成功的回调,并将失败的回调删除

  • 首先返回的数据是:result.data
  • 而我们真正需要的是返回回来的数组
  • 再把返回来的数据赋值给一个数据模型:tableData:[],一旦有数据之后,就会将数据渲染在空的表格当中

  • 成功完成——>效果(但是还要进行转换,比如1:男,2:女)

4、解决——>更换属于性别的一行的展示内容、更换图片展示内容

  • 去element官网查看table组件,找到

  • 找到这段代码,进行复制和修改

  • 首先记得删除原有的" prop="gender" ",因为不能让它展示服务端返回的数字1或者2。
  • 其次“{{}}”通常是在一些模板引擎或框架中看到的占位符。这种占位符用于在运行时动态地替换为实际的值或内容,就是比如用数据模型中的值替换
  • 这个操作其实就是用到一个插槽语法" slot-scope="scope" "
  • "scope.row"拿到的是后台这一行的数据,加上"scope.row.gender",得到指定性别的字段,再配合三元运算符进行判断。如果1——>男,2——>女


  • 处理图像字段,这里图像展示的是一个url地址,其实我们要展示的是一张图片。也有点类似,所以也需要加上一个插槽。
  • 这里就不用三元运算符,用img标签,然后src动态给地址,记住动态动态??!!

  • 这个时候显示出来的图片太大了,就要给它调宽、高度样式就行了

修改完成后就都有了

5、最后再给左边的侧边栏加上边框即可

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

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

相关文章

Xcode 在原生集成flutter项目

笔者公司有一个从2017年就开始开发的iOS和安卓原生项目&#xff0c;现在计划从外到内开始进行项目迁徙。 1》从gitee拉取flutter端的代码&#xff1b;&#xff08;Android报错Exception: Podfile missing&#xff09; 2》替换Xcode里的cocopods里Podfile的路径 然后报警 然后…

Linux从0到1——进程池

Linux从0到1——进程池 1. 进程池的概念2. 进程池实现思路3. 进程池的代码实现3.1 创建管道&#xff0c;创建子进程3.2 封装任务3.3 Work接口3.4 发送任务3.5 回收资源&#xff0c;关闭管道&#xff08;重点&#xff09;3.6 改造CreatChannels接口 4. 完整代码 1. 进程池的概念…

ECMAScript6模板字面量:反引号、${}占位符的使用

ECMAScript 6 中引入了模板字面量&#xff0c;主要通过多行字符串和字符串占位符对字符串进行增强操作。如下&#xff1a; //使用ECMAScript6模板字面量拼接字符串&#xff0c;例如&#xff1a;2024年8月12日 15:38:28 星期一 let dateRet ${Year}年${Month}月${Dates}日 ${H…

lvs、集群

1.集群和分布式 当多个用户当用户访问一个服务器时&#xff0c;服务器server1可能就会崩&#xff0c;假如这时候我们新加一个服务器server2来缓解server1的压力&#xff0c;那么就需要一个调度器lvs来分配&#xff0c;所以现在就是用户的访问就需要通过调度器之后到达服务器&a…

简述MYSQL聚簇索引、二级索引、索引下推

一丶聚簇索引 InnoDB的索引分为两种&#xff1a; 聚簇索引&#xff1a;一般创建表时的主键就会被mysql作为聚簇索引&#xff0c;如果没有主键则选择非空唯一索引作为聚簇索引&#xff0c;都没有则隐式创建一个索引作为聚簇索引&#xff1b;辅助索引&#xff1a;也就是非聚簇索…

KillWxapkg 自动化反编译微信小程序,小程序安全评估工具,发现小程序安全问题,自动解密,解包,可还原工程目录,支持修改Hook,小程序

纯Golang实现&#xff0c;一个用于自动化反编译微信小程序的工具&#xff0c;小程序安全利器&#xff0c;自动解密&#xff0c;解包&#xff0c;可还原工程目录&#xff0c;支持微信开发者工具运行 由于采用了UPX压缩的软件体积&#xff0c;工具运行时可能会出现错误报告&…

在等保测评中,如何平衡技术风险和非技术风险的评估?

在等保测评中平衡技术风险和非技术风险的评估&#xff0c;需要一个综合的方法来确保所有相关的风险都得到适当的考虑。以下是一些关键步骤&#xff1a; 1. 全面风险识别&#xff1a;首先识别所有可能影响组织的风险&#xff0c;包括技术风险&#xff08;如系统漏洞、恶意软件&…

企业大模型落地从0到0.1

现在人工智能里的“大明星”——大模型&#xff0c;正在悄悄改变各行各业。这就像给企业装上了一颗聪明的大脑&#xff0c;能帮助解决各种棘手问题&#xff0c;提升工作效率。今天&#xff0c;我们就来分析下企业如何一步一步让这个“大脑”在自家地盘里真正派上用场&#xff0…

九、OpenCVSharp 中的图像形态学操作

文章目录 简介一、腐蚀1. 腐蚀的原理和数学定义2. 结构元素的形状和大小选择3. 腐蚀操作的代码实现和效果展示二、膨胀1. 膨胀的概念和作用2. 与腐蚀的对比和组合使用(如开运算、闭运算)三、开运算1. 开运算的定义和用途(去除小的明亮区域)2. 开运算在去除噪声和分离物体方…

数据结构--树与二叉树

数据结构分类 集合 线性结构(一对一) 树形结构(一对多) 图结构(多对多) 数据结构三要素 1、逻辑结构 2、数据的运算 3、存储结构&#xff08;物理结构&#xff09; 树的概念 树的分类 满二叉树和完全二叉树 二叉排序树 平衡二叉树 二叉树分类总结 二叉树的存储结构 …

Element-UI自学实践

概述 Element-UI 是由饿了么前端团队推出的一款基于 Vue.js 2.0 的桌面端 UI 组件库。它为开发者提供了一套完整、易用、美观的组件解决方案&#xff0c;极大地提升了前端开发的效率和质量。本文为自学实践记录&#xff0c;详细内容见 &#x1f4da; ElementUI官网 1. 基础组…

Linux os下借助Qt+libvlc是实现多路拉取摄像头rtsp数据流并实时显示

前言 应客户方的一个实际项目需求&#xff0c;需要在Linux操作系统下拉取多路摄像头的RTSP数据流并实时显示。 该项目的硬件平台基于飞腾2000四核处理器与景嘉微显卡&#xff0c;搭载了Kylin V10操作系统。 当前景嘉微GPU最多支持同时连接16路摄像头&#xff0c;拉取1920x108…

在等保测评中,如何平衡资产识别的全面性和准确性,避免过度关注某些资产而忽视其他潜在风险?

在等保测评中平衡资产识别的全面性和准确性&#xff0c;避免过度关注某些资产而忽视其他潜在风险&#xff0c;可以通过以下策略实现&#xff1a; 1. 全面审计&#xff1a;确保进行一次全面的审计&#xff0c;包括所有类型的资产&#xff0c;避免遗漏任何关键组件。 2. 风险导…

上海亚商投顾:三大指数小幅调整,两市成交不足5000亿

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 大指数昨日窄幅震荡&#xff0c;临近尾盘小幅下挫。环保板块开盘大涨&#xff0c;永清环保、清研环境、中兰环…

OpenCV图像滤波(10)Laplacian函数的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 功能描述 计算图像的拉普拉斯值。 该函数通过使用 Sobel 运算符计算出的 x 和 y 的二阶导数之和来计算源图像的拉普拉斯值&#xff1a; dst Δ src ∂…

LeetCode刷题笔记第191题:位1的个数

LeetCode刷题笔记第191题&#xff1a;位1的个数 题目&#xff1a; 想法&#xff1a; 通过位运算判断二级制形式中有多少个1&#xff0c;代码及解释如下&#xff1a; class Solution:def hammingWeight(self, n: int) -> int:return sum(1 for i in range(32) if n & …

Latex或者word里面mathtype类型的数学公式如何变成mathematica里面的形式

详细步骤如下&#xff1a; 第一步&#xff1a;Latex里面的公式复制粘贴到word里面&#xff0c;转变成mathtype类型的数学公式&#xff08;若已经是word里面mathtype类型的数学公式&#xff0c;这一步可以省略&#xff09;&#xff0c;如下&#xff1a; 第二步&#xff1a;将ma…

数字孪生赋能智慧城市大脑智建设方案(可编辑65页PPT)

引言&#xff1a;随着科技的飞速发展&#xff0c;智慧城市的建设已成为全球城市发展的新趋势。数字孪生技术作为其中的关键技术之一&#xff0c;正逐步赋能智慧城市大脑的建设&#xff0c;推动城市治理从数字化向智能化、智慧化转型升级。本方案旨在简要介绍数字孪生赋能智慧城…

Mapreduce_csv_averageCSV文件计算平均值

csv文件求某个平均数据 查询每个部门的平均工资&#xff0c;最后输出 数据处理过程 employee_noheader.csv&#xff08;没做关于首行的处理&#xff0c;运行时请自行删除&#xff09; EmployeeID,EmployeeName,DepartmentID,Salary 1,ZhangSan,101,5000 2,LiSi,102,6000…

VisionPro二次开发学习笔记13-使用CogToolBlock进行图像交互

该程序演示了如何使用CogToolBlock进行图像交互. 从vpp文件中加载一个ToolBlock。 用户可以通过应用程序窗体上的数字增减控件修改ToolBlock输入端子的值。 用户还可以从coins.idb或采集FIFO中选择图像。 “运行一次”按钮执行以下操作&#xff1a; 获取下一个图像或读取下一…