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

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