記錄下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 👉 通過 偽元素 自定義一條更短的分割線。