Element学习（axios异步加载数据、案例操作）(5)
1、这次学习的是前次还未完成好的恶element案例，对列表数据的异步加载，并渲染展示。——>axios来发送异步请求
（1）https://i-blog.csdnimg.cn/direct/15b96936f0724daf9688814a5631cdf2.png
（2）在vue当中安装axios
（注意在当前的项目目次，并且安装完之后再将项目重启一下）
https://i-blog.csdnimg.cn/direct/752dff9ce4f34f7f8ec5895702f4175d.png
（3）这里我用到数据的url地址为：
https://mock.apifox.cn/m1/3128855-0-default/emp/list
2、在当前页面发起异步请求（还要记得导入"import ..."）
（1）导入（import）放在标签<script>中
https://i-blog.csdnimg.cn/direct/12f55aa9d9c24575a074cca3e7e73fcb.png
3、什么时间必要通过axios发送异步请求，然后加载数据？
[*]这里就要特殊注意vue当中的钩子方法，在里面发送请求。
[*]在Vue.js中，钩子方法（也称为生命周期钩子或生命周期事件）是Vue实例在创建、更新、销毁等关键时候自动调用的函数
[*]只要vue对象一创建、挂载完成，然后自动发送请求，加载数据。
[*]以是在methods下面再添加一个平级（定义一个钩子方法）——>mounted(){...}
https://i-blog.csdnimg.cn/direct/9ae62364720e495689ed56dc9ff50fa3.png
[*]发送异步请求——>get(" ...url地址... ")，背面再跟上一个成功的回调函数，直接输入thenc 就会自动生成成功的回调，并将失败的回调删除
https://i-blog.csdnimg.cn/direct/a514bf5b430d44e3a3718150e9e92175.png
[*]首先返回的数据是：result.data
[*]而我们真正必要的是返回回来的数组
[*]再把返回来的数据赋值给一个数据模型：tableData：[]，一旦有数据之后，就会将数据渲染在空的表格当中
https://i-blog.csdnimg.cn/direct/ede73780e92c4336bd66f00abff00533.png
https://i-blog.csdnimg.cn/direct/74d33d73264748c187bc6f64a45e265d.png
[*]成功完成——>效果（但是还要进行转换，比如1：男，2：女）
https://i-blog.csdnimg.cn/direct/ff95b62749c449a89d22fbf24dc0041e.png
4、解决——>更换属于性别的一行的展示内容、更换图片展示内容
[*]去element官网查看table组件，找到
https://i-blog.csdnimg.cn/direct/2ccc2e801acc45619b640d0ad8da2bf3.png
[*]找到这段代码，进行复制和修改
https://i-blog.csdnimg.cn/direct/a314b381a31b45a78d71ea0c5351d35f.png
[*]首先记得删除原有的" prop="gender" "，因为不能让它展示服务端返回的数字1或者2。
[*]其次“{{}}”通常是在一些模板引擎或框架中看到的占位符。这种占位符用于在运行时动态地替换为现实的值或内容，就是比如用数据模型中的值替换
[*]这个操作其实就是用到一个插槽语法" slot-scope="scope" "
[*] "scope.row"拿到的是背景这一行的数据，加上"scope.row.gender"，得到指定性别的字段，再配合三元运算符进行判断。如果1——>男，2——>女
https://i-blog.csdnimg.cn/direct/7902b37aaa2e466187a50c898fd8ea40.png
https://i-blog.csdnimg.cn/direct/4bcf8bcb7cd946d6a4a11fb781bfb9b1.png
[*]处置惩罚图像字段，这里图像展示的是一个url地址，其实我们要展示的是一张图片。也有点类似，以是也必要加上一个插槽。
[*]这里就不用三元运算符，用img标签，然后src动态给地址，记取动态动态？？！！
https://i-blog.csdnimg.cn/direct/933d99a745ef4f288d0799832fca358d.png
[*]这个时间显示出来的图片太大了，就要给它调宽、高度样式就行了
https://i-blog.csdnimg.cn/direct/85f42e26fff043f6bbe4abceb5af1ab6.png
[*]https://i-blog.csdnimg.cn/direct/25ccf28509c64649817f6c01c197a565.png
修改完成后就都有了
https://i-blog.csdnimg.cn/direct/e3574bec6c75469d9750da679f0695f0.png
5、末了再给左边的侧边栏加上边框即可
https://i-blog.csdnimg.cn/direct/1c4679126bbf433babb932cde8e1cfca.png
https://i-blog.csdnimg.cn/direct/fbe9eb54b3464c9cb827a3db5fcdb113.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]