Timeline 时间线 数据处理
在根据年份将数据分组然后在时间线上展示，前端将如何处理数据呢。
原始数据格式
[{createDate:'2018-03-24 14:01:11',title:'xxxx'},{createDate:'2019-03-14 14:01:11',title:'xxxx'},{createDate:'2018-07-24 14:01:11',title:'xxxx'},{createDate:'2019-02-14 14:01:11',title:'xxxx'},{createDate:'2018-01-24 14:01:11',title:'xxxx'}
]处理后数据格式
{'2018':[{createDate: '2018-01-24 14:01:11',title: 'xxxxx'},{createDate: '2018-03-24 14:01:11',title: 'xxxxx'},{createDate: '2018-07-24 14:01:11',title: 'xxxxx'}],'2019':[{createDate: '2019-01-24 14:01:11',title: 'xxxxx'},{createDate: '2019-03-24 14:01:11',title: 'xxxxx'}]}处理代码
let tableData = []//原始数据let pages = {}//处理后的数据tableData.forEach(table => {let date = table.createDate.substring(0,19); date = date.replace(/-/g,'/'); let timestamp = new Date(date).getTime();let d = new Date(timestamp)let year = d.getFullYear() //获取年份if(pages[year]){//根据年份分组pages[year].push(table)}else {pages[year] = [table]}})使用vue-cute-timeline生成时间线代码
<divv-for="(page, index) in pages":key="index"><timeline-title>{{index}}</timeline-title><timeline-item :hollow="true"v-for="(article, index) in page":key="index"><h4>{{article.title}}</h4><span>{{article.createDate}}</span></timeline-item></div>Timeline 时间线 数据处理相关推荐
- 微信小程序Timeline时间线效果实现
微信小程序实现类似elementUI的Timeline时间线效果,自适应页面与文本 wxml代码: <view class="box"><view wx:for= ...
- 微信小程序Timeline 时间线
微信小程序Timeline 时间线 仿ElementUI的Timeline 时间线,自适应页面与文本 效果图: wxml代码: <view class="status-alarm&qu ...
- 用timeline 时间线 和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线 和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...
- 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 ...
- element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升
最近看到同事在弄日志记录,需要实现的效果是: 自动滚动+无限滚动+动态加载数据 最终效果图如下: 1.html部分 <template><div id="boxTimeli ...
- 手写实现timeline时间线组件
先看效果图 template部分 <div class="g-steps"><div class="steps-list" v-if=&quo ...
最新文章
- 房子成焦点，被挂马的房产网站仍在增加中
- EXCEL 电子表格MID 返回值 不能用于计算的问题
- LightOJ - 1098 A New Function
- 【易网库】周年庆幸运大抽奖， 有机会获3年免费主机空间
- BBSSDK论坛移动化实现方案
- C语言试题汇总200例目录
- java 将bean转化为map,将javabean转化为map对象
- 使用PowerShell脚本部署定时器到MOSS2010(原创)
- UVA 540 Team Queue
- 使用iMazing将iphone的联系人信息导出至电脑
- ccf 推荐会议和期刊
- hbuilder中uniapp运行微信小程序模拟器时出错
- 蚂蚁金服技术90后：从艺术转投数学，还出版首本TensorFlow中文教材
- 【UVA 1589 --- Xiangqi】
- 利用python实现汉字转拼音的2种方法
- 做程序员10年有感,程序员必须要懂的---转自java诺曼底_kleen
- 推荐开源项目计划管理软件 kanboard
- 滚动轴承损伤、偏翘、电蚀、跑外圈特征分析及信号特征提取
- ffmpeg录制桌面(自己用gdi抓图)
- 微信小程序例子——修改小程序的标题