按照日期生成动态表头

72 阅读2分钟

前言

哎,搞了一个多月,人都麻了......在导师的帮助下,从0到1开发了一个项目,果然是敏捷开发,一个人至少负责一个项目,每周五都要上线一次,忙疯。虽然天天被导师叼,奈何他远在深圳,诶我看不见,哈哈哈。不过还是被导师的能力所折服,我遇到问题就拉会找他,他接过便一边骂骂咧咧,一边三下五除二,‘duang’就出来了。牛逼plus。 最近碰到这样一个需求,要求前台做一个类似如下的表格:

image.png 咋一看,特简单,拿到数据一渲染就好了嘛,谁知表格后面的日期是动态生成的,而后台给我的数据是这样的:

   tableData: [
        {
          periodId: '2016/10/02 14:42:30',
          name: '王小虎',
          gender: '男',
          score1: 90,
          score2: 94,
          score3: 98 
        }, 
        {
          periodId: '2016/10/02 14:42:30',
          name: '林小花',
          gender: '女',
          score1: 80,
          score2: 90,
          score3: 75
        }, 
        {
          periodId: '2016/10/02 14:42:30',
          name: '杨路',
          gender: '女',
          score1: 90,
          score2: 99,
          score3: 78
        }]

于是厚着脸皮再次请教师父.....

第一步:封装格式化日期函数

虽然看不懂,咱会用就好了......

// 封装格式化日期
export const dateFormat = (fmt, date) => {
    const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
    }
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '')
        .substr(4 - RegExp.$1.length))
    }
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            fmt = fmt.replace(RegExp.$1, () => {
                return (RegExp.$1.length == 1) ? o[k] : (`00${o[k]}`
                .substr(('' + o[k]).length))
            })
        }
    }
    return fmt
}

第二步:处理动态表头

computed: {
  dateCols(){
    const [{ periodId = '' } = {}] = this.tableData
    const t = new Date(periodId)
    const y = t.getFullYear()
    const m = t.getMonth()
    const firstMonth = dateFormat('yyyy-MM',t)
    const secondMonth = dateFormat('yyyy-MM',new Date(y,m+1))
    const thirdMonth = dateFormat('yyyy-MM',new Date(y,m+2))
    return [
      {label: firstMonth, prop: 'score1'},
      {label: secondMonth, prop: 'score2'},
      {label: thirdMonth, prop: 'score3'}
    ]
  }
}

第三步:el-table 渲染

<template>
<div class="text">
  <h4>语文月考成绩表</h4>
  <el-table :data="tableData" border style="width: 80%">
    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
    <el-table-column prop="gender" label="性别" width="100"></el-table-column>
    <el-table-column 
      v-for="(item,index) in dateCols" 
      :key="index" 
      :prop="item.prop" 
      :label="item.label"
    >
    </el-table-column>
  </el-table>
</div>
</template>

大功告成啦,快去试试吧!