时间线组件 (Timeline)

Element-UI 的 Timeline 组件用于可视化地呈现时间流信息，通过时间线的形式展现事件的顺序，适用于展示时间顺序的事件或步骤。

提示

Timeline 时间线组件官方文档：https://element.eleme.cn/#/zh-CN/component/timeline (opens new window)

1. 基本用法

基本语法：使用 <el-timeline> 标签作为容器，内部包含多个 <el-timeline-item>，每个 el-timeline-item 都表示时间线中的一个节点。

<template>
  <el-timeline>
    <el-timeline-item
      v-for="(item, index) in timelineData"
      :key="index"
      :timestamp="item.timestamp"
      :type="item.type"
      :color="item.color">
      {{ item.content }}
    </el-timeline-item>
  </el-timeline>
</template>

<script>
export default {
  data() {
    return {
      timelineData: [
        { timestamp: '2024-08-01', content: '事件 1', type: 'primary', color: '' },
        { timestamp: '2024-08-05', content: '事件 2', type: 'success', color: '' },
        { timestamp: '2024-08-10', content: '事件 3', type: 'danger', color: '' },
        { timestamp: '2024-08-15', content: '事件 4', type: 'warning', color: '' }
      ]
    };
  }
};
</script>

• 时间戳：通过 timestamp 属性显示每个节点的时间戳。
• 节点类型：通过 type 属性设置节点的类型（如 primary、success、warning、danger、info），从而影响节点的颜色和风格。
• 节点颜色：使用 color 属性自定义节点的颜色，可使用 hsl、hsv、hex 或 rgb 格式。
• 

Timeline 属性

参数	说明	类型	可选值	默认值
reverse	指定节点排序方向，默认为正序	boolean	—	false

Timeline-Item 属性

参数	说明	类型	可选值	默认值
timestamp	时间戳	string	—	—
hide-timestamp	是否隐藏时间戳	boolean	—	false
placement	时间戳位置	string	top / bottom	bottom
type	节点类型	string	primary / success / warning / danger / info	—
color	节点颜色	string	hsl / hsv / hex / rgb	—
size	节点尺寸	string	normal / large	normal
icon	节点图标	string	—	—

Timeline-Item 插槽

名称	说明
—	Timeline-Item 的内容
dot	自定义节点

2. 时间线常用示例

自定义节点颜色和类型

通过设置 type 和 color 属性，可以为每个节点自定义不同的颜色和类型。

<template>
  <el-timeline>
    <el-timeline-item
      timestamp="2024-08-01"
      type="primary"
      color="#409EFF">
      节点 1 - Primary
    </el-timeline-item>
    <el-timeline-item
      timestamp="2024-08-05"
      type="success"
      color="#67C23A">
      节点 2 - Success
    </el-timeline-item>
    <el-timeline-item
      timestamp="2024-08-10"
      type="danger"
      color="#F56C6C">
      节点 3 - Danger
    </el-timeline-item>
    <el-timeline-item
      timestamp="2024-08-15"
      type="warning"
      color="#E6A23C">
      节点 4 - Warning
    </el-timeline-item>
  </el-timeline>
</template>

• 节点颜色：通过 color 属性设置节点的颜色，如 #409EFF、#67C23A 等。
• 节点类型：通过 type 属性设置节点的类型，影响节点的样式。
• 

自定义节点图标

可以通过 icon 属性为节点设置自定义图标，也可以通过 slot 插槽完全自定义节点内容。

<template>
  <el-timeline>
    <el-timeline-item
      timestamp="2024-08-01"
      icon="el-icon-more">
      自定义图标节点 1
    </el-timeline-item>
    <el-timeline-item
      timestamp="2024-08-05">
      <template v-slot:dot>
        <i class="el-icon-info"></i>
      </template>
      自定义节点内容 2
    </el-timeline-item>
  </el-timeline>
</template>

• 自定义图标：通过 icon 属性为节点添加图标，也可以通过 dot 插槽完全自定义节点内容。
• 自定义节点内容：使用 dot 插槽可以自定义节点的内容，如图标、文本或其他 HTML 元素。
• 

时间戳位置和隐藏时间戳

可以通过 placement 属性设置时间戳的位置，通过 hide-timestamp 属性隐藏时间戳。

<div class="block">
  <el-timeline>
    <el-timeline-item timestamp="2018/4/12" placement="top">
      <el-card>
        <h4>更新 Github 模板</h4>
        <p>王小虎 提交于 2018/4/12 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="top">
      <el-card>
        <h4>更新 Github 模板</h4>
        <p>王小虎 提交于 2018/4/3 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/2" placement="top">
      <el-card>
        <h4>更新 Github 模板</h4>
        <p>王小虎 提交于 2018/4/2 20:46</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</div>

• 时间戳位置：通过 placement 属性设置时间戳在顶部或底部。
• 隐藏时间戳：使用 hide-timestamp 属性可以隐藏时间戳。
• 

反向排序时间线

通过设置 reverse 属性，可以实现时间线的反向排序。

<template>
  <el-timeline :reverse="true">
    <el-timeline-item
      timestamp="2024-08-15"
      type="warning">
      最新事件在最上面
    </el-timeline-item>
    <el-timeline-item
      timestamp="2024-08-10"
      type="danger">
      较早的事件
    </el-timeline-item>
    <el-timeline-item
      timestamp="2024-08-05"
      type="success">
      更早的事件
    </el-timeline-item>
  </el-timeline>
</template>

• 反向排序：通过 reverse 属性可以让时间线按照时间倒序显示。
• 

3. 总结

• 灵活的节点自定义：Timeline 组件支持自定义节点的颜色、类型、图标和内容，提供了极大的灵活性。
• 多样的时间戳配置：通过 placement 和 hide-timestamp 属性，可以控制时间戳的位置和显示方式。
• 事件顺序控制：通过 reverse 属性，时间线可以正序或反序显示，适应不同的时间流展示需求。
• 插槽支持：通过 slot 插槽，可以完全自定义节点的内容和样式，使得时间线更加丰富和个性化。

Timeline 组件在展示时间流信息时非常直观和实用，适用于各种需要展示时间顺序的场景。通过自定义节点内容和样式，可以灵活地满足不同的设计和展示需求。