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

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

上一篇文章中我们通过二次封装的axios发送了请求并且获取到了数据，接下来我们需要将获取到的数据通过v-for来动态渲染到我们的页面上去并且通过css布局使得整体的样式如下图所示：

1. 首先顶部的每日数据里面需要我们注意的是图标的引入方法，Element-plus里面的图标不可以直接使用，我们需要另外引入，在main.js文件里面写入以下代码，就可以使用组件库里面的图标了

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }

2. 在mock模拟数据的时候我们配置了图标的样式以及颜色，然后在页面里面我们可以通过component来写入图标以及自定义图标的颜色，具体的代码如下所示：

 <component
            class="icons"
            :is="item.icon"
            :style="{ background: item.color }"
          ></component>

3. 在我们创建getCountData之前我们需要import一个生命周期，就是onMounted，我们需要将获取数据的方法在这个生命周期下面使用，即页面创建时就要执行的函数，具体代码如下图所示：

4. ，然后我们使用v-for来渲染我们的数据，这里我们使用了element-plus里面的el-card卡片组件，然后循环渲染topData里面的数据，动态绑定key的值，具体的代码如下所示：

<div class="top">
    <div v-for="(item, index) in topData" :key="index">
      <el-card class="item" shadow="hover">
        <div class="whole">
          <component
            class="icons"
            :is="item.icon"
            :style="{ background: item.color }"
          ></component>
          <div>
            <h4 class="title">{{ item.title }}</h4>
            <text class="num">{{ item.num }}单</text>
          </div>
        </div>
      </el-card>
    </div>

然后css的样式代码如下图所示：