el-timeline 无法通过 props 修改节点连线颜色，因其竖线由 .el-timeline-item__node::before 伪元素以固定 CSS 背景色绘制，需用 :deep() 等穿透方式覆盖样式。
Element UI 的 el-timeline 为什么改不了节点连线颜色
因为 el-timeline 默认只暴露了 timestamp、type 等基础属性，但没提供 line-color 或类似 API 控制竖线样式。所有连线都是通过 CSS 伪元素（如 ::before）绘制的灰色细线，不响应组件 props。
常见错误现象：在模板里写 :color="item.status === 'success' ? '#409eff' : '#c0c4cc'，发现只有圆点变色，竖线纹丝不动。
- 竖线实际由
.el-timeline-item__node::before生成，背景色写死在 element-ui 的 CSS 文件里 - 修改必须走 CSS 覆盖，不能靠 Vue 数据绑定驱动
- 若项目用了 scoped style，需用
/deep/、::v-deep或:deep()穿透（Vue 3 推荐:deep()）
如何用 CSS 覆盖 el-timeline 竖线和节点颜色
直接覆盖关键选择器即可，不需要重写整个组件。注意优先级和作用域：
:deep(.el-timeline-item__node::before) {
background-color: #409eff;
}
:deep(.el-timeline-item__node) {
border-color: #409eff;
}
:deep(.el-timeline-item__dot) {
background-color: #409eff;
}
如果要按状态差异化渲染（比如“审批中”用橙色、“已通过”用绿色），就得结合类名或 data 属性：
立即学习“前端免费学习笔记（深入）”；
- 给每个
<el-timeline-item></el-timeline-item>加:class，例如:class="'timeline-status-' + item.status" - 然后写对应 CSS：
.timeline-status-pending .el-timeline-item__node::before { background-color: #e6a23c; } - 避免用
!important，靠选择器权重解决（比如加父容器 class 前缀）
纯 HTML/CSS 手写时间线时怎么控制颜色逻辑
手写更灵活，但容易忽略竖线高度计算和响应式断点。关键点是：竖线必须撑满容器，且各节点位置对齐。
常见错误现象：竖线只到第一个节点、节点偏移错位、移动端竖线断裂。
- 竖线用
::after伪元素 + 绝对定位，top: 0; bottom: 0;撑高 - 每个节点用
position: relative，圆点用::before绘制，颜色直接写 inline style 或 class 控制 - 若节点内容高度不一，建议统一设
min-height，避免竖线被截断 - 颜色变量建议抽成 CSS 自定义属性，方便主题切换：
--timeline-active-color: #67c23a;
Vue 中动态切换时间线颜色要注意什么
颜色不是静态值，而是随业务状态实时变化——比如审批流走到哪一步，就高亮对应节点及上方连线。这时候不能只改当前节点，还要处理“已过节点”和“未达节点”的视觉区分。
容易被忽略的细节：
- 竖线颜色不能只依赖当前项，得看它和上一项的状态组合（比如从“待审”到“通过”，中间那段线该用过渡色还是分段色）
- Vue 的响应式更新可能不会触发伪元素重绘，必要时可加
key强制刷新整条时间线 - 如果用了
v-for渲染，确保每项有稳定:key，否则状态错乱会导致颜色错位 - 动画过渡（如颜色渐变）需额外加
transition到伪元素，原生不支持，得用 JS 配合getComputedStyle触发重排
最麻烦的其实是“中间某段线单独着色”——这已经超出常规时间线组件能力，得拆成多个独立竖线片段来控制。
