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、最后再给左边的侧边栏加上边框即可

相关推荐
小希爸爸2 分钟前
3、中医基础入门和养生
前端·javascript·后端
我的golang之路果然有问题7 分钟前
快速了解redis,个人笔记
数据库·经验分享·redis·笔记·学习·缓存·内存
摆烂工程师19 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭20 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码27 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger32 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话33 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时33 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳33 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子36 分钟前
深入解析 iframe
前端