时间线 Timeline

对应 Arco Timeline，默认节点为主色实心圆，timestamp 对应 label。 属性用法见 Element Plus 文档。

基础时间线

timestamp 默认显示在内容下方，对应 Arco 的 label。

• Project created

  2026-10-20
• Design reviewed

  2026-10-21
• Release published

  2026-10-22

<template>
  <el-timeline style="width: 100%">
    <el-timeline-item timestamp="2026-10-20">Project created</el-timeline-item>
    <el-timeline-item timestamp="2026-10-21">Design reviewed</el-timeline-item>
    <el-timeline-item timestamp="2026-10-22">Release published</el-timeline-item>
  </el-timeline>
</template>

颜色与扩展节点

type、hollow 对应 Arco 节点颜色与空心样式；large、图标和顶部时间戳保留 Element Plus 扩展形态。

• Completed
• Needs attention
• In progress
• 2026-10-24

  Next milestone

<script setup lang="ts">
import { MoreFilled } from '@element-plus/icons-vue'
</script>

<template>
  <el-timeline style="width: 100%">
    <el-timeline-item type="success">Completed</el-timeline-item>
    <el-timeline-item type="danger">Needs attention</el-timeline-item>
    <el-timeline-item type="primary" hollow>In progress</el-timeline-item>
    <el-timeline-item size="large" :icon="MoreFilled" timestamp="2026-10-24" placement="top">Next milestone</el-timeline-item>
  </el-timeline>
</template>

与 Arco 的差异

• 顶部时间戳和 large 节点没有 Arco 对应项，保留布局或按尺寸级差延伸。