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

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)的重要性，适合展示历史记录、操作日志、项目进度等场景。

基本用法

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

v-for="(activity, index) in activities"

:key="index"

:timestamp="activity.timestamp">

{{activity.content}}

关键点：

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

自定义节点样式

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

:icon="activity.icon"

:type="activity.type"

:color="activity.color"

:size="activity.size"

:timestamp="activity.timestamp">

{{activity.content}}

可配置属性：

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

自定义时间标记位置

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

Update template

Tom committed 2018/4/12 20:46

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

组件属性详解

Timeline组件属性

属性名说明类型可选值默认值reverse控制时间轴排序方向booleantrue/falsefalse

Timeline-item组件属性

属性名说明类型可选值默认值timestamp时间标记内容string--hide-timestamp是否隐藏时间标记boolean-falseplacement时间标记位置stringtop/bottombottomtype节点类型stringprimary/success/warning/danger/info-color节点背景色string多种颜色格式-size节点大小stringnormal/largenormalicon自定义图标类名string--

使用场景建议

操作日志展示：适合用时间轴展示用户的操作历史记录项目进度跟踪：可以清晰展示项目各个阶段的时间节点版本更新记录：按时间顺序展示产品的版本迭代情况订单状态追踪：展示订单从创建到完成的各个状态变化

最佳实践

当时间节点较多时，建议使用placement="top"使布局更清晰重要节点可以使用不同的type或自定义颜色加以强调对于关键节点，可以使用icon属性添加醒目标志内容区域可以使用el-card等组件增强视觉效果

时间轴组件是展示时间序列数据的理想选择，通过合理配置可以满足各种业务场景的需求，同时保持优雅的视觉效果。

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element