1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Timeline：
在你的 Vue 组件中导入 Timeline 和 TimelineItem，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-timeline>
<el-timeline-item timestamp="2022-01-01" color="green">
事件 1
</el-timeline-item>
<el-timeline-item timestamp="2022-03-15" color="blue">
事件 2
</el-timeline-item>
<el-timeline-item timestamp="2022-05-20" color="purple">
事件 3
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
import { ElTimeline, ElTimelineItem } from 'element-plus';
export default {
components: {
ElTimeline,
ElTimelineItem,
},
};
</script>
在上述代码中，我们导入了 ElTimeline 和 ElTimelineItem 组件，并在模板中使用 ElTimeline 包裹多个 ElTimelineItem 组件。每个 ElTimelineItem 组件表示一个时间线上的事件，通过 timestamp 属性设置事件发生的时间，通过 color 属性设置事件的颜色。
3. 自定义 Timeline：
你可以根据需要自定义 Timeline，例如，添加图标、设置样式等：
<template>
<div>
<el-timeline>
<el-timeline-item timestamp="2022-01-01" color="green" icon="el-icon-check">
<p>事件 1</p>
<p>这是事件 1 的详细描述。</p>
</el-timeline-item>
<el-timeline-item timestamp="2022-03-15" color="blue" icon="el-icon-document">
<p>事件 2</p>
<p>这是事件 2 的详细描述。</p>
</el-timeline-item>
<el-timeline-item timestamp="2022-05-20" color="purple" icon="el-icon-user">
<p>事件 3</p>
<p>这是事件 3 的详细描述。</p>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
import { ElTimeline, ElTimelineItem } from 'element-plus';
export default {
components: {
ElTimeline,
ElTimelineItem,
},
};
</script>
在这个例子中，我们通过在 ElTimelineItem 中使用 icon 属性来设置每个时间线项的图标。你还可以根据需要调整其他属性和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5582/ElementPlus