当前位置：首页 > news >正文

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

news 2025/6/27 20:26:07

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动态给地址，记住动态动态？？！！

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

修改完成后就都有了