Vue使用el-statistic和el-card显示大屏中的统计数据
<template>
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>销售总额</span>
</div>
<div>
<el-statistic title="总销售额" :value="112893" />
</div>
</el-card>
</el-col>
<!-- 其他统计卡片 -->
</el-row>
</template>
<script>
export default {
// 组件逻辑
};
</script>
<style>
/* 样式 */
</style>这个例子展示了如何在Vue中使用Element UI的<el-row>、<el-col>、<el-card>和<el-statistic>组件来创建一个包含统计数据的看板。<el-row>和<el-col>用于布局，<el-card>用于提供统计数据的容器，而<el-statistic>则显示具体的统计数据。这个例子简洁明了，并且可以作为创建数据看板的起点。
评论已关闭