组件-Element—Timeline（时间线）

组件—时间线

基础用法

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

⾃定义节点样式

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

⾃定义时间戳

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

Timeline Attributes
Timeline-item Attributes
Timeline-Item Slot

组件-Element—Timeline（时间线）相关推荐

用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...
微信小程序Timeline时间线效果实现
微信小程序实现类似elementUI的Timeline时间线效果,自适应页面与文本 wxml代码: <view class="box"><view wx:for= ...
微信小程序Timeline 时间线
微信小程序Timeline 时间线仿ElementUI的Timeline 时间线,自适应页面与文本效果图: wxml代码: <view class="status-alarm&qu ...
Streamline(流线)，Pathline(迹线)，Streakline(脉线) and Timeline(时间线)
流线.迹线.脉线和时间线可以用来描述和可视化流动,它们的定义如下: 1.流线流线是在给定时刻,画出的流线与流动中每一点的速度矢量相切,这是理解流动的有力工具. 2.迹线迹线是由一个给定的粒子所描出 ...
Timeline 时间线基础用法
1.html内容 Timeline 可拆分成多个按照时间戳排列的活动, 时间戳是其区分于其他控件的重要特征 <el-timeline style="flex: 1; overflow ...
什么是 Hudi Timeline (时间线)
Timeline 不同时刻对表的所有操作都被 Hudi 维护在一条时间线上,这有助于提供表的瞬时的视图查询,同时还能根据数据的到达顺序支持高校的数据检索服务.Hudi instant 核心概念包含以下 ...
手动封装一个timeLine时间线，点击有动态效果
html部分 <div id="time-line"><divclass="item"v-for="(item, index) in ...
Timeline 时间线数据处理
在根据年份将数据分组然后在时间线上展示,前端将如何处理数据呢. 原始数据格式 [{createDate:'2018-03-24 14:01:11',title:'xxxx'},{createDate: ...
element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升
最近看到同事在弄日志记录,需要实现的效果是: 自动滚动+无限滚动+动态加载数据最终效果图如下: 1.html部分 <template><div id="boxTimeli ...

组件-Element—Timeline（时间线）

组件-Element—Timeline（时间线）

组件-Element—Timeline（时间线）相关推荐

最新文章

热门文章