Element Timeline时间线的实现
程序员文章站
2022-07-26 12:37:54
目录组件—时间线基础用法
排序:
⾃定义节点样式
⾃定义时间戳
组件—时间线
基础用法
<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-item v-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-item v-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时间线的实现的文章就介绍到这了,更多相关element timeline时间线内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
用Axios Element实现全局的请求loading的方法
-
vue+element-ui实现行数可控的表格输入
-
Vue+Element实现表格编辑、删除、以及新增行的最优方法
-
vue项目中将element-ui table表格写成组件的实现代码
-
利用vue + element实现表格分页和前端搜索的方法
-
vue+element-ui实现表格编辑的三种实现方式
-
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
-
vue.js+Element实现表格里的增删改查
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
动态实现element ui的el-table某列数据不同样式的示例