组件-Element—Timeline（时间线）

组件—时间线

1. 基础用法
   

   <div class="block"><div class="radio">排序：<el-radio-group v-model="reverse"><el-radio :label="true">倒序</el-radio><el-radio :label="false">正序</el-radio></el-radio-group></div><el-timeline :reverse="reverse"><el-timeline-itemv-for="(activity, index) in activities":key="index":timestamp="activity.timestamp">{{activity.content}}</el-timeline-item></el-timeline></div><script>export default {data() {return {reverse: true,activities: [{content: '活动按期开始',timestamp: '2018-04-15'}, {content: '通过审核',timestamp: '2018-04-13'}, {content: '创建成功',timestamp: '2018-04-11'}]};}};</script>

2. ⾃定义节点样式
   

   <div class="block"><el-timeline><el-timeline-itemv-for="(activity, index) in activities":key="index":icon="activity.icon":type="activity.type":color="activity.color":size="activity.size":timestamp="activity.timestamp">{{activity.content}}</el-timeline-item></el-timeline></div><script>export default {data() {return {activities: [{content: '支持使用图标',timestamp: '2018-04-12 20:46',size: 'large',type: 'primary',icon: 'el-icon-more'}, {content: '支持自定义颜色',timestamp: '2018-04-03 20:46',color: '#0bbd87'}, {content: '支持自定义尺寸',timestamp: '2018-04-03 20:46',size: 'large'}, {content: '默认样式的节点',timestamp: '2018-04-03 20:46'}]};}};</script>

3. ⾃定义时间戳
   

   <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>

4. Timeline Attributes
   

5. Timeline-item Attributes
   

6. Timeline-Item Slot