携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
上一篇文章中我们完成了Main.vue组件里面的超级管理员卡片组件，接下来我们要完成下面的品牌购买量的卡片组件
- 首先这个组件也是用到了el-card组件，还有这个组件里面的el-table和el-table-column,这里的品牌数据需要我们自己去定义以下
- 在data中return一个tableData，里面包括了品牌的名字，日销量，月销量，总销量，定义的数据如下图所示：
- 数据定义完成之后我们就需要在el-table表单卡片里面进行v-for循环渲染了，首先我们在el-card里面写上v-for="(val,key) in tableLabel" 然后这个表单是垂直显示的，所以我们的表单标签是el-table-column,css样式我们写在标签上面使用内嵌式，具体的代码如下所示：
<el-card style="margin-top: 20px; height: 460px">
<el-table :data="tableData">
<el-table-column
v-for="(val, key) in tableLabel"
:key="key"
:prop="key"
:label="val"
>
</el-table-column>
</el-table>
</el-card>
</el-col>
- 然后这个品牌销量的卡片就完成了，同样的，我们在card这个组件上面添加了shadow="hover"属性，鼠标经过哪一行哪一行就会有个鼠标经过的动画。
- 然后进行上面的销量卡片的编写，同样也是使用的el-card组件，然后在data中定义每个表格的数据，通过v-for="item in countData" :key="item.name"循环渲染定义的数据到页面上去，然后通过动态绑定CSS样式进行样式的修改，这里买呢大多是数字数据，通过插值表达式渲染到页面上即可
