el-card 结合 el-descriptions 作为信息展示

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