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生成时间线代码

       

          {{index}}
          
            
{{article.title}}
            {{article.createDate}}