(vue)el-progress左侧添加标签/名称

(vue)el-progress左侧添加标签/名称

---

---

解决思路：使用 CSS 绝对定位

html

<div class="progress-main" v-for="(e, i) of progressList" :key="i"><span class="progress-label">{{ e.label }}</span><el-progress :percentage="e.value" :stroke-width="15" striped />
</div>

css

.progress-main {position: relative;padding-left: 60px; /* 为标签留出空间 */margin: 20px 0;.progress-label {position: absolute;left: 0;top: 50%;transform: translateY(-50%);min-width: 60px;}
}