我准备配合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获取后台数据成功的效果,大功告成