vue3.0后台管理项目（day12）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情

上一篇文章中我们配置了echats中的饼状图，然后首页的样式就完成了，接下来我们将使用到element-plus中的form表格组件来完成我们的用户中心表单样式，还使用mock来模拟虚假数据并且完成渲染。

1. 首先我们的用户中心的样式如下图所示：

这里面会用到element-plus的form，table,弹出框等等组件

2. 我们先进入element-plus官网： element-plus.gitee.io/zh-CN/guide… ,在组件里面找到table组件，然后我们选择基础样式并且复制源码粘贴到我们新建的user.vue文件中，然后这里的：data我们需要自己来创建并且绑定
3. 我们进入fastmock,在项目里面新建一个table接口数据，然后如下图所示创建我们的假数据

4. 创建完成之后我们需要在api里面封装发送请求的函数，因为baseURL在前面的文章里面以及配置过了，所以我们只需要在url后面写上对应的路径，代码如所示：

  getTableData(){
        return request({
            url:"/home/getTableData",
            method:'get'
        })
    },

5. 在user.vue文件里面import引入request以及getCurrentInstance, onMounted, ref, reactive这些，然后获取到proxy并且创建一个userData动态空数组来存放模拟接口里面的数据，代码如下：

const { proxy } = getCurrentInstance();
const userData = ref([]);

6. 然后就可以发送请求获取数据了，创建一个getUserData的函数，发送get请求并将获取到的res.data.data赋值给userData.value，具体代码如下所示：

const getUserData = async () => {
  await request.get("/user/getUserData").then((res) => {
    config.total = res.data.total;
    config.pageSize = res.data.pageSize;
    config.currentPage = res.data.currentPage;
    userData.value = res.data.data;
  });
};