【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格

已于 2022-11-15 16:48:17 修改
阅读量6k 收藏 39
点赞数 6
分类专栏： 前端案例 文章标签： vue.js 前端 ui
于 2022-11-03 20:16:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/karshey/article/details/127674643
版权

文章目录


参考视频： VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目

案例链接
【前端】Vue+Element UI案例：通用后台管理系统-导航栏（视频p1-16）https://blog.csdn.net/karshey/article/details/127640658
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠（p17-19）https://blog.csdn.net/karshey/article/details/127652862
【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格（p20-22）https://blog.csdn.net/karshey/article/details/127674643
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战（p23-25）https://blog.csdn.net/karshey/article/details/127735159
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图（p27-30）https://blog.csdn.net/karshey/article/details/127737979
【前端】Vue+Element UI案例：通用后台管理系统-面包屑、tag栏（p31-35）https://blog.csdn.net/karshey/article/details/127756733
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出（p36-38）https://blog.csdn.net/karshey/article/details/127787418
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框（p39-42）https://blog.csdn.net/karshey/article/details/127777962
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面Login（p44）https://blog.csdn.net/karshey/article/details/127795302
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出（p45-46）https://blog.csdn.net/karshey/article/details/127849502
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由（p47-48）https://blog.csdn.net/karshey/article/details/127865621
【前端】Vue+Element UI案例：通用后台管理系统-项目总结https://blog.csdn.net/karshey/article/details/127867638

目标

在这里插入图片描述

  • 红框内部分
  • 都是卡片，鼠标悬停会有阴影
  • 左下是表格

代码

0.布局

分为左右两边，大约1：2。如果一共分为24份的话，就是8：16.

打开文档：我们可以选它，改成8：16.
在这里插入图片描述

<template>
    <el-row>
        <el-col :span="8">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row>
</template>

1.左上User卡片

在这里插入图片描述
我们这里要的只是鼠标悬停产生阴影的效果，所以只用它的标签el-card即可。

我们把结构写上：

<el-card>
       <div class="user">
           <img src="../assets/images/user.png" alt="">
           <div class="userInfo">
               <p div class="name">Admin</p>
               <p div class="access">超级管理员</p>
           </div>
       </div>
       <div class="loginInfo">
           <p>上次登录时间：<span>2021-7-19</span></p>
           <p>上次登陆地点：<span>武汉</span></p>
       </div>
   </el-card>
</el-col>

加上样式：

.user {
    // 垂直居中
    display: flex;
    align-items: center;

    // 外边距:分割线距离loginInfo的距离
    margin-bottom: 20px;
    // 内边距:分割线距离User的距离
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;

    img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40px;
    }

    .userInfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }
}

.loginInfo {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;

        span {
            color: #666666;
            margin-left: 60px;
        }
    }
}

效果：
在这里插入图片描述
其实这里花精力比较多的地方会是样式。但样式不是本篇的重点。

2.左下table卡片

2.1数据：TableData.js

把它单独放到一个js中再导出：

const TableData = [
    {
        name: 'oppo',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
    },
    {
        name: 'vivo',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
    },
    {
        name: '苹果',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
    },
    {
        name: '小米',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
    },
    {
        name: '三星',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
    },
    {
        name: '魅族',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
    }
]

export default TableData
2.2table

我们的table也要有鼠标悬停有阴影的效果，所以它也要在el-card里。

找到文档中的table：data是对象数据，prop用于填入数据，label是列名。
在这里插入图片描述
代码：

<el-card style="margin-top: 20px;">
    <el-table :data="TableData" style="width: 100%">
        <el-table-column prop="name" label="课程">
        </el-table-column>
        <el-table-column prop="todayBuy" label="今日购买">
        </el-table-column>
        <el-table-column prop="monthBuy" label="本月购买">
        </el-table-column>
        <el-table-column prop="totalBuy" label="总购买">
        </el-table-column>
    </el-table>
</el-card>

效果：
在这里插入图片描述

2.3代码优化：循环

显然上述代码是重复代码，我们可以把它优化：把prop和label的值放在一个对象的键值对里：

const TableLabel={
    name:'课程',
    todayBuy:'今日购买',
    monthBuy:'本月购买',
    totalBuy:'总购买'
}

export default TableLabel

在html里循环：

<el-card style="margin-top: 20px;">
   <el-table :data="TableData" style="width: 100%">
       <!-- 这里的val,key对应的是对象里的 -->
       <el-table-column v-for="(value, key) in TableLabel" :prop="key" :label="value">
       </el-table-column>
   </el-table>
</el-card>

3.右上数据卡片

3.1数据：CountData
const CountData = [
    {
        name: "今日支付订单",
        value: 1234,
        icon: "success",
        color: "#2ec7c9",
    },
    {
        name: "今日收藏订单",
        value: 210,
        icon: "star-on",
        color: "#ffb980",
    },
    {
        name: "今日未支付订单",
        value: 1234,
        icon: "s-goods",
        color: "#5ab1ef",
    },
    {
        name: "本月支付订单",
        value: 1234,
        icon: "success",
        color: "#2ec7c9",
    },
    {
        name: "本月收藏订单",
        value: 210,
        icon: "star-on",
        color: "#ffb980",
    },
    {
        name: "本月未支付订单",
        value: 1234,
        icon: "s-goods",
        color: "#5ab1ef",
    },
]
export default CountData
3.2结构

显然我们可以用循环来写。

<div class="num">
    <el-card v-for="item in CountData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
        <i class="icon" :class="`el-icon-${item.icon}`" :style="{ backgroundColor: item.color }"></i>
        <div class="details">
            <p class="price">{{ priceFormate(item.value) }}</p>
            <p class="desc">{{ item.name }}</p>
        </div>
    </el-card>
</div>

效果：
在这里插入图片描述

3.3布局

一行三个，显然可以flex布局，每个的width是33.3%，这是排满的情况。
如果我们想要有点间隙，那就要width是32%。

看一下文档，想给卡片设置样式，可以添加属性body-style：
在这里插入图片描述

<el-card v-for="item in CountData" 
:key="item.name" 
:body-style="{ display: 'flex', padding: 0 }">

css：

.num{
    display: flex;
    // 要换行
    flex-wrap: wrap;
    // 从头到尾均匀排列
    justify-content: space-between;
    margin-left:20px;

    .el-card{
        width: 32%;
        margin-bottom: 20px;
    }
}
3.4样式

css：

.num {
    display: flex;
    // 要换行
    flex-wrap: wrap;
    // 从头到尾均匀排列
    justify-content: space-between;
    margin-left: 20px;

    .el-card {
        width: 32%;
        margin-bottom: 20px;

        .icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;   
            font-size: 30px;                   
            color: #fff;
        }

        .details {
            // 竖着排且居中
            display: flex;
            flex-direction: column;
            justify-content: center;

            margin-left: 15px;

            .price {
                font-size: 30px;
                margin-bottom: 10px;
                line-height: 30px;
                height: 30px;
            }

            .desc {
                font-size: 14px;
                color: #999;
                text-align: center;
            }
        }
    }
}

效果：
在这里插入图片描述

总代码

Home.vue

<template>
    <el-row>
        <el-col :span="8">
            <!-- user卡片 -->
            <el-card>
                <div class="user">
                    <img src="../assets/images/user.png" alt="">
                    <div class="userInfo">
                        <p div class="name">Admin</p>
                        <p div class="access">超级管理员</p>
                    </div>
                </div>
                <div class="loginInfo">
                    <p>上次登录时间：<span>2021-7-19</span></p>
                    <p>上次登陆地点：<span>武汉</span></p>
                </div>
            </el-card>
            <!-- table卡片 -->
            <el-card style="margin-top: 20px;">
                <el-table :data="TableData" style="width: 100%">
                    <!-- 这里的val,key对应的是对象里的 -->
                    <el-table-column v-for="(value, key) in TableLabel" :prop="key" :label="value">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <div class="num">
                <el-card v-for="item in CountData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{ backgroundColor: item.color }"></i>
                    <div class="details">
                        <p class="price">{{ priceFormate(item.value) }}</p>
                        <p class="desc">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import TableData from '../data/TableData'
import TableLabel from '../data/TableLabel'
import CountData from '../data/CountData'

export default {
    data() {
        return {
            TableData,
            TableLabel,
            CountData
        }
    },
    methods: {
        priceFormate(price) {
            return "￥" + price
        }
    }
}
</script>

<style lang="less" scoped>
.user {
    // 垂直居中
    display: flex;
    align-items: center;

    // 外边距:分割线距离loginInfo的距离
    margin-bottom: 20px;
    // 内边距:分割线距离User的距离
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;

    img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40px;
    }

    .userInfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }
}

.loginInfo {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;

        span {
            color: #666666;
            margin-left: 60px;
        }
    }
}

.num {
    display: flex;
    // 要换行
    flex-wrap: wrap;
    // 从头到尾均匀排列
    justify-content: space-between;
    margin-left: 20px;

    .el-card {
        width: 32%;
        margin-bottom: 20px;

        .icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;   
            font-size: 30px;                   
            color: #fff;
        }

        .details {
            // 竖着排且居中
            display: flex;
            flex-direction: column;
            justify-content: center;

            margin-left: 15px;

            .price {
                font-size: 30px;
                margin-bottom: 10px;
                line-height: 30px;
                height: 30px;
            }

            .desc {
                font-size: 14px;
                color: #999;
                text-align: center;
            }
        }
    }
}
</style>

参考

视频p20-p22

karshey
关注
专栏目录
Vue + Element-UI —— 项目实战（八）
2401_84433807的博客
04-29 930
vue + element-ui 项目演示。
vue+elementui v-for 循环卡片列表
lrbtony的博客
01-08 8956
for循环实现循环卡片样式
Vue——Elementui案例实现
测试
05-04 1889
elementui
【Material-UI】Card 组件详解
最新发布
lph159的博客
09-07 492
Card 是 Material-UI 提供的一个内容容器，通常用于展示与某一主题相关的信息和操作。它能够将图片、文本、按钮等内容整合到一个视觉层次分明的卡片内，为用户提供简洁、直观的内容展示。Card 组件是非常常见的 UI 元素，常用于显示博客文章预览、产品信息、用户资料等。Card：基础容器，用于承载卡片内的所有内容。：卡片内容的容器。CardHeader：卡片的标题部分，通常包含标题和副标题。CardMedia：用于展示图片、视频等媒体内容。：按钮组的容器，常用于放置操作按钮。
Vue和Element UI组件实现动态生成卡片
weixin_45266691的博客
12-22 1705
在Vue和Element UI中动态生成卡片，可以使用v-for指令和Element UI的Card组件。
VUE + element-ui 实现卡片式平铺布局（无分页）
NRGAGA的专栏
08-07 2万+
element-ui 实现分页详见以前的文章：https://blog.csdn.net/nrlovestudy/article/details/82747299 本文借鉴了一部分上文，卡片布局部分不再是自己写 DIV 和 CSS ，而是改用了element-ui 的 “card 卡片”， 使用方法见：https://element.eleme.cn/#/zh-CN/component/...
Vue+Element-ui实例_评测表单
徐小硕—心之所向，素履以往
08-12 2107
下面做了一个公司内部的评测表单页面，用于给公司内部人员打分，和写一些意见或建议。 其中难点： （1）如何在固有elementUI框架中的table组件中，插入自己需要的组件，比如input。让table组件不仅仅是展示数据，还能写入数据。 （2）如何利用v-for循环，首先把后台传来的，被评测人和对应的问题，写入table组件中。 （3）如何再次利用v-for循环，把和问题对应的input组件循环到table组件中，比如分数使用el-input-number、意见或建议使用el-input。 效果
Vue2+ElementUI 静态首页案例
朝花夕拾的博客
09-21 3476
【代码】Vue2+ElementUI 静态首页案例。
Vue+ELementUI主页布局----侧边栏布局（el-aside）
热门推荐
weixin_51351637的博客
10-04 3万+
第一节Login.vue登录表单知识： Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址：Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token，保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开
【VUE3】ElementUI--el-card卡片列表、el-tree 结合多选框获取子节点id导出数据
qq_48468636的博客
04-23 6791
在父级选中后我们不需要父级的id，只要求子级已选中的id，当子级全部勾选后父级也执行勾选，此时也要把父级id去掉。1.通过 npm、yarn、pnpm 安装。这次比较简单直接，贴上代码就可以了！首先要在项目文件安装具体可以查看。
【Vue+element-ui搭建前端页面】适用于初学者学习
一学就会小小王的博客
11-03 1万+
到这儿我们就学习到怎么用Vue和Element搭建前端界面，并且了解了一些前端向后端发送接收请求需要的技术，希望大家看到这会有所收获！t=M85B组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/quickstart。
多种element-ui标签选项卡插件
06-09
多种基于element-ui标签选项卡插件，vue选项卡插件制作的标签选项卡代码，支持水平垂直选项卡切换效果。
vue加element综合案例
小旺财的博客
03-09 681
vue 加Element实例，箭头函数
前端样式-卡片01
Anolzo
03-19 3382
运用到的技术： html + css+ js 样式： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
Web核心技术之Element组件库学习及综合案例(2)
2401_84446963的博客
04-29 549
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoux3IB2-1642766557871)(./assets/image-20210825171411003.png)]以上是我们在综合案例要实现的功能。对数据的除了对数据的增删改查功能外，还有一些复杂的功能，如批量删除分页查询条件查询等功能批量删除功能：每条数据前都有复选框，当我选中多条数据并点击批量删除按钮后，会发送请求到后端并删除数据库中指定的多条数据。分页查询。
技术协会Web前端部面试，Web核心技术之Element组件库学习及综合案例，精通web前端开发
2301_76225520的博客
04-05 965
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoux3IB2-1642766557871)(./assets/image-20210825171411003.png)]以上是我们在综合案例要实现的功能。对数据的除了对数据的增删改查功能外，还有一些复杂的功能，如批量删除分页查询条件查询等功能批量删除功能：每条数据前都有复选框，当我选中多条数据并点击批量删除按钮后，会发送请求到后端并删除数据库中指定的多条数据。分页查询。
Web核心技术之Element组件库学习及综合案例
helpluozhao123的博客
01-21 4494
2，Element Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。 Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~ 如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。 我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是 https://element.eleme.cn/#/zh-CN 进入官网能看到如下页面 [外链
element-ui 实现卡片式列表，选择，分页代码
NRGAGA的专栏
09-17 1万+
这是浏览器效果： 以下是代码实现： 实际应用中，踩了几个坑，总结为下面代码中的3个关键点。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

karshey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值