网站的实用性,青岛九二网络科技有限公司,广州市建设工程信息管理平台,如何在网站插做视频记录下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.…记录下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 涉及style4.2 解析 实现效果 1. el-descriptions 组件使用
1.1 结合v-for实现列表渲染
el-descriptions :column1el-descriptions-item v-for(label, index) in item.labels :keyindex :labellabel{{ item.params[index] }}/el-descriptions-item
/el-descriptions1.2 解析
:column1 设置 el-descriptions 每行只显示 1 列默认是 3 列。el-descriptions-item 通过 v-for 遍历 labels 和 params动态生成描述项。:labellabel 绑定每个 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-foritem in systemParam :keyitem.title shadowalways:style{background: linear-gradient(135deg, ${item.colorStart}, ${item.colorEnd}),color: white}
template #headerspan stylecolor: white; font-size: 18px ; font-weight: bold;{{ item.title }}/span/templateel-descriptions :column1el-descriptions-item v-for(label, index) in item.labels :keyindex :labellabel{{ item.params[index] }}/el-descriptions-item/el-descriptions
/el-card3.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 通过 伪元素 自定义一条更短的分割线。
