vue日期传给后台_vue moment库格式化处理后端传的日期

开篇

日期时间格式前端和后端都可以处理,我比较推荐前端来处理(定制化高),下面我就介绍下两种处理的方式

后端处理

django默认不经处理传给前端的日期格式为2018-08-26T19:53:36.538463,这往往不是我们希望的,其实处理这个很简单,只要在序列化类中处理下就好，如下

class WorkOrderSerializer(serializers.ModelSerializer):

"""

序列化类

"""

# 后端处理时间

apply_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True)

complete_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True)

class Meta:

model = WorkOrder

fields = "__all__"

我们来看下接口,可以发现日期已经被格式成我们想要的了

HTTP 200 OK

Allow: GET, POST, HEAD, OPTIONS

Content-Type: application/json

Vary: Accept

{

"count": 9,

"next": null,

"previous": null,

"results": [

{

"id": 11,

"apply_time": "2018-09-01 11:03:13",

"complete_time": "2018-09-01 11:03:13",

}

]

}

前端处理

image

前端处理需要安装下moment(JavaScript 日期处理类库)

npm install moment --save

然后在需要格式化日期的组件中引入moment,也可以全局引入的

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')

}

}

}

在template中使用

:data="value"

border

stripe

style="width: 100%">

label="申请时间"

prop="apply_time"

:formatter="dateFormat" # formatter为固定写法，dateFormat就是刚写的方法

>

label="完成时间"

prop="complete_time"

:formatter="dateFormat">

这样就可以了,在来看下处理后的日期格式

image

本篇结束