东莞网站制作网站设计,做网站要什么技术,酒店网站建设工作,wordpress建立模板下载1、这次学习的是上次还未完成好的恶element案例#xff0c;对列表数据的异步加载#xff0c;并渲染展示。 ——axios来发送异步请求 #xff08;1#xff09; #xff08;2#xff09;在vue当中安装axios #xff08;注意在当前的项目目录#xff0c;并且安装完之后… 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组件找到 找到这段代码进行复制和修改 首先记得删除原有的 propgender 因为不能让它展示服务端返回的数字1或者2。其次“{{}}”通常是在一些模板引擎或框架中看到的占位符。这种占位符用于在运行时动态地替换为实际的值或内容就是比如用数据模型中的值替换这个操作其实就是用到一个插槽语法 slot-scopescope scope.row拿到的是后台这一行的数据加上scope.row.gender得到指定性别的字段再配合三元运算符进行判断。如果1——男2——女 处理图像字段这里图像展示的是一个url地址其实我们要展示的是一张图片。也有点类似所以也需要加上一个插槽。这里就不用三元运算符用img标签然后src动态给地址记住动态动态 这个时候显示出来的图片太大了就要给它调宽、高度样式就行了 修改完成后就都有了 5、最后再给左边的侧边栏加上边框即可
