axios请求后台数据并渲染

简介: axios请求后台数据并渲染

我准备配合elemetui进行获取后台数据然后通过表格的方式渲染出来

在methods方法中定义一个方法,然后通过axios去请求,代码如下:

getTabelInfo(){
            let _that = this;
            axios.post(' /shopStaffSkuSuffix/list')
                .then(res=>{
                    _that.getTabeldata = res.data.rows;
                    console.log(res.data.rows)
            }).catch(err=>{
                this.$message({
                    message: '列表数据获取失败',
                    type: 'success'
                });
            })
        },

在上面我们可以看到,在post中写入后台的url,然后通过then方法去获取拿到的数据并赋值给一个数组,

我们可以看到成功时打印出来的数据如图:

这些是我们需要用到的属性

然后我们可以根据elementui封装好的参数直接进行遍历,然后我们在的标签添加一个属性并赋值

:data=“getTabeldata”,在他的子标签 添加一个属性prop=“platform”,将拿到数据对应的参数写进去就可以遍历出来了,我的代码如下:

下面是我遍历成功的表格:如图

上面员工的参数staff是null值所以没有遍历出来

现在我们看到的就是使用axios获取后台数据成功的效果,大功告成

相关文章
|
6天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
6天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
6天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
6天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入
|
6天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
6天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
|
6天前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
6天前
|
JavaScript API
vue 模板引用
vue 模板引用
|
6天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
7天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院