开篇

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

后端处理

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",
}
]
}

前端处理

http://momentjs.cn/ 官网

先来看下未处理的日期格式



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

npm install moment --save

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


<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>
<div class="workorder-list">
<el-table
:data="value"
border
stripe
style="width: 100%">
<el-table-column
label="申请时间"
prop="apply_time"
:formatter="dateFormat" # formatter为固定写法,dateFormat就是刚写的方法
>
</el-table-column>
<el-table-column
label="完成时间"
prop="complete_time"
:formatter="dateFormat">
</el-table-column>
</template>
</el-table-column> </el-table>
</div>
</template>

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



本篇结束

vue moment库格式化处理后端传的日期的更多相关文章

  1. Vue接收后端传过来excel表格的文件流并下载

    题外话:当接收文件流时要确定文件流的类型,但也有例外就是application/octet-stream类型,主要是只用来下载的类型,这个类型简单理解意思就是通用类型类似 var .object.ar ...

  2. ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!

    前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...

  3. 2018年度 35 个最好用 Vue 开源库

    在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠 ...

  4. 35 个最好用的 Vue 开源库

    35 个最好用的 Vue 开源库 Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面. 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统.它提 ...

  5. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

  6. Github 上 36 个最实用的 Vue 开源库

    任何一个开发者,都是十分喜欢使用开源软件包的.因为它使开发工作变得更快速.高效.容易.如果没有开源软件包,开发工作将变得疲惫不堪,不断的重复造轮子! 下面整理了 Github 上 36 个实用的 Vu ...

  7. 35 个最好用 Vue 开源库

    2018年度 35 个最好用 Vue 开源库 在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包 ...

  8. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  9. mac下svn问题——“.a”(静态库)文件无法上传解决

    mac下svn问题——“.a”(静态库)文件无法上传解决    “.a”(静态库)文件无法上传(svn工具:Versions)          网上查询了一下,说是Xcode自带的svn和Versi ...

随机推荐

  1. Swagger注解

    swagger注解说明  1.与模型相关的注解,用在bean上面 @ApiModel:用在bean上,对模型类做注释: @ApiModelProperty:用在属性上,对属性做注释 2.与接口相关的注 ...

  2. matplotlib 坑

    1 archlinux里安装好matplotlib之后一定要安装python-cario pacman -S python-cairo

  3. 153. Find Minimum in Rotated Sorted Array找其中的最小值

    [抄题]: [暴力解法]: 时间分析: 空间分析: [优化后]: 时间分析: 空间分析: [奇葩输出条件]: [奇葩corner case]: [思维问题]: 总算自己写出一道题来了. [英文数据结构 ...

  4. salt-api配置安装 以及使用

    salt-api salt-api是我们通过restful-api调用salt-master的接口,且调用的时候必须通过认证才能调用,认证的用户为系统用户,下面就说说如何配置salt-api. 安装S ...

  5. easyui Tree树形控件的异步加载

    Tree控件 $('#partyOrgTree').tree({ checkbox: false, url: getDataUrl, onClick: function (node) { getDiv ...

  6. MySQL开发——【介绍、安装】

    什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 数据库的分类? 关系型数据库 ...

  7. 通过Solrj实现对索引库中数据的局部更新操作

    for (UpdateIndexDTO updateIndexDTO : data) { // 局部更新 SolrInputDocument doc = new SolrInputDocument() ...

  8. Ubuntu postgres 内网 安装 卸载

    # 安装pg,(使用安装包, 不能连接外网) tar包下载地址 https://www.postgresql.org/ftp/source/v11.1/放在/home/sxy 目录(随便放)cd /h ...

  9. linux下反弹shell

    01 前言 CTF中一些命令执行的题目需要反弹shell,于是solo一波. 02 环境 win10      192.168.43.151       监听端    装有nc kali        ...

  10. 设计模式 工厂模式 使用shared_ptr

    参考http://blog.csdn.net/calmreason/article/details/50903729 所有产品继承同一基本类 由工厂保存基类指针 产生各类产品 代码 // 002.cp ...