el-card 结合 el-descriptions 作为信息展示
记录下el-card 组合 el-descriptions 实现动态展示信息
文章结构
- 实现效果
- 1. `el-descriptions` 组件使用
- 1.1 结合v-for实现列表渲染
- 1.2 解析
- 2. 自定义 `el-descriptions` 样式
- 2.1 修改背景色、字体颜色
- 2.2 调整字体大小
- 2.3 解析
- 3. `el-card` 结合 `el-descriptions` 作为信息展示
- 3.1 代码
- 3.2 解析
- 4. `el-card` 标题分割线优化
- 4.1 涉及style
- 4.2 解析
实现效果

1. el-descriptions 组件使用
1.1 结合v-for实现列表渲染
<el-descriptions :column="1"><el-descriptions-item v-for="(label, index) in item.labels" :key="index" :label="label">{{ item.params[index] }}</el-descriptions-item>
</el-descriptions>
1.2 解析
:column="1"👉 设置el-descriptions每行只显示 1 列(默认是 3 列)。el-descriptions-item通过v-for遍历labels和params,动态生成描述项。:label="label"👉 绑定每个el-descriptions-item的标题。
2. 自定义 el-descriptions 样式
2.1 修改背景色、字体颜色
/* 控制 el-descriptions 的背景透明 */
:deep(.el-descriptions),
:deep(.el-descriptions__body) {background: transparent !important;
}/* 控制 el-descriptions-item 的颜色 */
:deep(.el-descriptions-item) {background: transparent !important;color: white !important;
}/* 控制 el-descriptions 的 label 和 content 颜色 */
:deep(.el-descriptions__label),
:deep(.el-descriptions__content) {color: white !important; /* 让 el-descriptions 的文字变白 */
}
2.2 调整字体大小
/* 标签部分(左侧的 label) */
:deep(.el-descriptions__label) {font-size: 16px !important;
}/* 内容部分(右侧的内容) */
:deep(.el-descriptions__content) {font-weight: bold;font-size: 17px !important;
}
2.3 解析
background: transparent👉 让el-descriptions和el-descriptions-item背景变透明。color: white👉 让label和content变成白色字体。font-size和font-weight: bold👉 调整label和content的字号和加粗状态。
3. el-card 结合 el-descriptions 作为信息展示
3.1 代码
<el-card v-for="item in systemParam" :key="item.title" shadow="always":style="{background: `linear-gradient(135deg, ${item.colorStart}, ${item.colorEnd})`,color: 'white'}"
><template #header><span style="color: white; font-size: 18px ; font-weight: bold;">{{ item.title }}</span></template><el-descriptions :column="1"><el-descriptions-item v-for="(label, index) in item.labels" :key="index" :label="label">{{ item.params[index] }}</el-descriptions-item></el-descriptions>
</el-card>
3.2 解析
- 每个
el-card代表一个数据块。 - 通过
linear-gradient动态设置el-card背景颜色。 el-descriptions作为el-card内容展示详细参数信息。
4. el-card 标题分割线优化
4.1 涉及style
/* el-card 自带的标题分割线和标题绑定过深,不方便调整 */
/* 移除 el-card 自带的标题分割线 */
:deep(.el-card__header) {position: relative;border-bottom: none;
}/* 自定义标题分割线 */
:deep(.el-card__header::after) {content: ''; position: absolute;bottom: 0;left: 50%;width: 90%;height: 1px;background-color: rgba(255, 255, 255, 0.5);transform: translateX(-50%);
}
4.2 解析
border-bottom: none👉 取消el-card默认的底部边框。el-card__header::after👉 通过伪元素自定义一条更短的分割线。
相关文章:
el-card 结合 el-descriptions 作为信息展示
记录下el-card 组合 el-descriptions 实现动态展示信息 文章结构 实现效果1. el-descriptions 组件使用1.1 结合v-for实现列表渲染1.2 解析 2. 自定义 el-descriptions 样式2.1 修改背景色、字体颜色2.2 调整字体大小2.3 解析 3. el-card 结合 el-descriptions 作为信息展示3.…...
GaussDB自带诊断工具实战指南
一、引言 GaussDB是一种分布式的关系型数据库。在数据库运维中,快速定位性能瓶颈、诊断故障是保障业务连续性的关键。GaussDB内置了多种诊断工具,结合日志分析、执行计划解析和实时监控功能,帮助开发者与运维人员高效解决问题。本文深入讲解…...
LeetCode 链表章节
简单 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4]示例 2: 输入:l1 [], l2…...
SSL证书和HTTPS:全面解析它们的功能与重要性
每当我们在互联网上输入个人信息、进行在线交易时,背后是否有一个安全的保障?这时,SSL证书和HTTPS便扮演了至关重要的角色。本文将全面分析SSL证书和HTTPS的含义、功能、重要性以及它们在网络安全中的作用。 一、SSL证书的定义与基本概念 S…...
正交投影与内积空间:机器学习的几何基础
前言 本文隶属于专栏《机器学习数学通关指南》,该专栏为笔者原创,引用请注明来源,不足和错误之处请在评论区帮忙指出,谢谢! 本专栏目录结构和参考文献请见《机器学习数学通关指南》 正文 🔍 1. 内积空间的…...
Qt中txt文件输出为PDF格式
main.cpp PdfReportGenerator pdfReportGenerator;// 加载中文字体if (QFontDatabase::addApplicationFont(":/new/prefix1/simsun.ttf") -1) {QMessageBox::warning(nullptr, "警告", "无法加载中文字体");}// 解析日志文件QVector<LogEntr…...
《HelloGitHub》第 107 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言 Python、…...
Langchain解锁LLM大语言模型的结构化输出能力(多种实现方案)
在 LangChain解锁LLM大语言模型的结构化输出能力:调用 with_structured_output() 方法 这篇博客中,我们了解了格式化LLM输出内容的必要性以及如何通过调用langchain框架中提供的 with_structured_output() 方法对LLM输出进行格式化(三种可选方…...
AI数据分析:deepseek生成SQL
在当今数据驱动的时代,数据分析已成为企业和个人决策的重要工具。随着人工智能技术的快速发展,AI 驱动的数据分析工具正在改变我们处理和分析数据的方式。本文将着重介绍如何使用 DeepSeek 进行自动补全SQL 查询语句。 我们都知道,SQL 查询语…...
力扣-动态规划-115 不同子序列
思路 dp数组定义:0_i-1的字符串中有0_j-1的字符串有dp[i][j]个递推公式: if(s[i-1] t[j-1]){dp[i][j] dp[i-1][j-1] dp[i-1][j]; }else{dp[i][j] dp[i-1][j]; } 在该元素相同时,有两种可能1:使用该元素,所以0_i-2…...
Qt C++ 开发 动态上下页按钮实现
项目开发,想实现动态的显示按钮,考虑使用QStackedWidget做两个页面去切换。 首先,我们使用Qt ui 画出两个QStackedWidget的两个页面 要实现切换,我们只需要调用stackedWidget->setCurrentIndex(index)就行。 那么如何自动调…...
数据结构第五节:排序
1.常见的排序算法 插入排序:直接插入排序、希尔排序 选择排序:直接选择排序、堆排序 交换排序:冒泡排序、快速排序 归并排序:归并排序 排序的接口实现: // 1. 直接插入排序 void InsertSort(int* a, int n); // 2. 希…...
从文件到块: 提高 Hugging Face 存储效率
Hugging Face 在Git LFS 仓库中存储了超过30 PB 的模型、数据集和 Spaces。由于 Git 在文件级别进行存储和版本控制,任何文件的修改都需要重新上传整个文件。这在 Hub 上会产生高昂的成本,因为平均每个 Parquet 和 CSV 文件大小在 200-300 MB 之间&#…...
Android14 串口控制是能wifi adb实现简介
Android14 串口控制是能wifi adb实现简介 一、前言 文章目录 Android14 串口控制是能wifi adb实现简介一、前言二、Android14 串口控制是能wifi adb实现1、设置prop属性命令开启adb(1)相关prop属性设置(2)在设置界面或者 ifconfi…...
vue3中 组合式~测试深入组件:事件 与 $emit()
一、语法(props) 第一步:在组件模板表达式中,可以直接用$emit()方法触发自定义事件, <!-- MyComponent --> <button click"$emit(someEvent)">Click Me</button> 第二步父组件可以通过 v-on (缩写为 ) 来监听…...
SQL-labs13-16闯关记录
http://127.0.0.1/sqli-labs/less-13/ 基于POST单引号双注入变形 1,依然是一个登录框,POST型SQL注入 2,挂上burpsuite,然后抓取请求,构造请求判断漏洞类型和闭合条件 admin 发生了报错,根据提示闭合方式是(…...
基于微信小程序的停车场管理系统的设计与实现
第1章 绪论 1.1 课题背景 随着移动互联形式的不断发展,各行各业都在摸索移动互联对本行业的改变,不断的尝试开发出适合于本行业或者本公司的APP。但是这样一来用户的手机上就需要安装各种软件,但是APP作为一个只为某个公司服务的一个软件&a…...
DAIR-V2X-R数据集服务器下载
【官方github链接】https://github.com/ylwhxht/V2X-R 点击并登录 选择并点击下载 浏览器弹窗,右键选择复制下载链接 ------------------------------------服务器下载----------------------------------------- 登录服务器,选在要下载的文件夹复制路…...
table 拖拽移动
表格拖拽 Sortable.js中文网|配置 <!-- 教务处 --><template><div class"but"><el-button click"mergeAndPrintArrays()" type"primary">保存数据</el-button><el-button click"restoration()" t…...
Linux使用笔记:Find Tree 命令
Tree 命令的使用 使用-I 参数,过滤掉不想展未的目录或文件使用-L参数,指定展示的目录层级个数 arsenaltxzq1899:~/Workspace/vue-application$ tree -I node_modules/ -I public/ -L 2 . ├── components.json ├── Dockerfile ├── ecosystem.c…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
多模态图像修复系统:基于深度学习的图片修复实现
多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 编辑 前言: 类加载器 1. …...
