Element UI 时间轴(Timeline)组件详解

蒋一南

于 2025-05-30 09:06:24 发布

阅读量385

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00547/article/details/148324584

Element UI 时间轴(Timeline)组件详解

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

什么是时间轴组件

时间轴(Timeline)是Element UI提供的一个可视化展示时间序列数据的组件，它能够清晰地按照时间顺序展示一系列事件或活动。与步骤条(Steps)组件不同，时间轴更强调时间标记(timestamp)的重要性，适合展示历史记录、操作日志、项目进度等场景。

基本用法

时间轴组件最基本的用法是按时间顺序展示一系列事件，支持升序和降序两种排列方式。

<el-timeline :reverse="reverse">
  <el-timeline-item
    v-for="(activity, index) in activities"
    :key="index"
    :timestamp="activity.timestamp">
    {{activity.content}}
  </el-timeline-item>
</el-timeline>

关键点：

reverse属性控制时间轴的排列顺序，true为降序，false为升序
每个el-timeline-item代表一个时间节点
timestamp属性设置时间标记
内容区域可以放置任意文本或HTML内容

自定义节点样式

时间轴节点支持多种自定义样式，包括大小、颜色和图标等。

<el-timeline-item
  :icon="activity.icon"
  :type="activity.type"
  :color="activity.color"
  :size="activity.size"
  :timestamp="activity.timestamp">
  {{activity.content}}
</el-timeline-item>

可配置属性：

type：设置节点类型，支持primary/success/warning/danger/info五种预设样式
color：自定义节点颜色，支持多种颜色格式
size：设置节点大小，normal(默认)或large
icon：使用Element UI图标替换默认节点样式

自定义时间标记位置

当内容区域高度较大时，可以将时间标记(timestamp)放置在内容上方。

<el-timeline-item timestamp="2018/4/12" placement="top">
  <el-card>
    <h4>Update template</h4>
    <p>Tom committed 2018/4/12 20:46</p>
  </el-card>
</el-timeline-item>

通过设置placement属性为"top"，时间标记会显示在内容上方，避免内容过长时造成视觉混乱。

组件属性详解

Timeline组件属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | |--------|------|------|--------|--------| | reverse | 控制时间轴排序方向 | boolean | true/false | false |

Timeline-item组件属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | |--------|------|------|--------|--------| | timestamp | 时间标记内容 | string | - | - | | hide-timestamp | 是否隐藏时间标记 | boolean | - | false | | placement | 时间标记位置 | string | top/bottom | bottom | | type | 节点类型 | string | primary/success/warning/danger/info | - | | color | 节点背景色 | string | 多种颜色格式 | - | | size | 节点大小 | string | normal/large | normal | | icon | 自定义图标类名 | string | - | - |