持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
上一篇文章我们需要将获取到的数据通过v-for来动态渲染到我们的页面上去并且通过css完成了基础的布局，接下来我们将完成左下部分的升序降序的表格以及echarts图表的使用
- 首先我们还是一样，通过fastmock来编写我们的模拟数据接口，官方链接：www.fastmock.site/#/login ，这个网站可以帮助前端来模拟需要用到的数据，当后端的接口还没写完的时候我们可以 通过mock来模拟数据完成渲染，编写的接口数据如下图所示：
- 然后我们需要在api.js文件里面配置好获取首页表格的数据的方法，因为在前面几篇文章中以及对axios进行了二次封装了并且配置了基础的url这里我们直接使用来获取数据，具体的api.js文件代码如下所示：
getTableData(){
return request({
url:"/home/getTableData",
method:'get'
})
},
然后在setup语法糖里面创建getTableData方法并且通过async以及await来发送异步请求获取到我们模拟的数据，上一篇文章说了如果不确定是否获取到了数据可以通过打印res来查看数据，这里我们就不过多赘述了，我们还需要定义一个响应式的tableData数组来存放获取到的数据，首先需要import引入ref，然后将tableData.value = res.data.data，这样我们就可以 获取到数据了，然后通过element-plus中的form表单组件来渲染获取到的数据，代码如下所示：
