小知识点 - 在前端处理后端传来的日期数据（vue + moment.js + elementUI改良版）

vue + moment.js + elementUI 格式化处理后端传的日期

参考链接：https://www.jianshu.com/p/6be55d12b2b7

原文做法

http://momentjs.cn/ 官网
前端处理需要安装下moment(JavaScript 日期处理类库)

npm install moment --save

在vue中编写日期格式化方法

<script>
import moment from 'moment' # 导入
export default {
  name: 'order-list',
  props: ['value'],
  methods: {
    // 编写日期格式化方法
    dateFormat: function(row, column) {
      console.log(row, column)
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      // 这里的格式根据需求修改
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }

  }
}
</script>

在template中使用日期格式化方法

<template>
	<el-table :data="value">
    	<el-table-column label="申请时间" prop="apply_time"
	      :formatter="dateFormat" # formatter为固定写法，dateFormat就是刚写的方法>
    	</el-table-column>
   </el-table>
</template>

按照上面的方法，可以实现简单json格式的日期自定义格式处理。

但是复杂的json怎么办？

比如我的 json：

"rows": [
	{
     "member": {
         "id": 82,
         "name": "徐子文",
         "sex": "男",
         "idCard": "123456789000999999",
         "phoneNumber": "18511123442",
         "regTime": "Mar 8, 2019 12:00:00 AM"
     },
     "setmeal": {
         "id": 6,
         "name": "测试套餐",
         "code": "0002",
         "helpCode": "CSTC",
         "sex": "2",
         "price": 1200.0,
         "remark": "test",
         "img": "3bd90d2c-4e82-42a1-a401-882c88b06a1a2.jpg"
     },
     "order": {
         "id": 2,
         "memberId": 82,
         "orderDate": "Mar 8, 2019 12:00:00 AM",
         "orderStatus": "已付款",
         "setmealId": 6
     }
	}
]

页面表格定义：

<el-table :data="rows">
    <el-table-column  label="下单时间" prop="order.orderDate"
      :formatter="dateFormat" # formatter为固定写法，dateFormat就是刚写的方法 >
    </el-table-column>
</el-table>

我的2级结构，使用了原文的方法后，控制台打印结果：

column.property  = order.orderDate 
column.property type = string

row[column.property] = undefined

可见，上面原文方式的表格绑定的prop属性只适用于1级结构，而我的是2级。将来可能会有更复杂的3级、N级。

所以我对原文的dateFormat方法进行了改良：

<script>
export default {
  methods: {
    // 日期格式化方法
    dateFormat(row, column) {
          return dateFormatWithPattern(row, column, 'YYYY-MM-DD');
    }
  }
}
</script>

/**
 * 功能说明：根据指定pattern处理日期格式
 * @param row 行数据
 * @param column 列数据
 * @param pattern 日期格式
 * @returns {*}
 */
function dateFormatWithPattern(row, column, pattern) {
    // console.log(row, column);
    let props = column.property.split('.');
    if (props == null) {
        return '';
    }
    let date = row[props[0]];
    // 格式化orderDate
    for (let i = 1; i < props.length; i++) {
        date = date[props[i]];
    }
    if (date === undefined) {
        return '';
    }
    // # 这里的格式根据需求修改
    return moment(date).format(pattern);
}

总结

如何在前端处理后端传来的日期格式？2步。

1. 在vue的methods中添加并编写dateFormat(row , column)方法。
2. 在对应的el-table-column组件上添加:formatter="dateFormat"绑定， formatter为elementUI提供的固定写法，dateFormat就是刚写的方法