网站新闻详细页面设计app拉新推广平台

记录下el-card 组合 el-descriptions 实现动态展示信息

实现效果

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 👉 通过 伪元素 自定义一条更短的分割线。