开篇

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

后端处理

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. VueJs学习参考的例子

    his is a vue+mint's demo ,for loler(PAD LOL) https://github.com/yuanman0109/vue2.0-Mint-lolbox   An ...

  2. Linux Ipv6地址配置

    Step1:启用IPV6网络配置 [root@node-1 ~]# vi /etc/sysconfig/network NETWORKING_IPV6=yes   //全局启用ipv6初始化IPV6_ ...

  3. php中对象赋值问题

    今天遇到一个问题, 一开始拼接的SQL语句,然后想多次使用时发现会被重置,然后想到给重新赋值一次,但是发现这样赋值会出问题,百思不得其解,最后经过搜索,发现PHP中对象赋值给一个变量之类的赋值的其实是 ...

  4. 文件上传的UI自动化

    from pywinauto.application import Application import win32gui handle = win32gui.FindWindow("#32 ...

  5. Linux top命令中CPU信息的详解(转)

    add by zhj: 下面的文章解释的很好了,这里再说明一下top命令中wa的含义,我们知道,当IO阻塞时,操作系统会把进程改为阻塞态,将CPU调度到运行其它进程. CPU在空闲状态下,会检查是否有 ...

  6. linux虚拟机配置上网(静态IP)和配置tomcat服务环境

    常用命令:vi或者vim编辑 ,按i编辑模式,按ecs进入基本模式,按 :w  保存:按 :wq  退出并保存:mv移动::q退出 :ln -sv apache-tomcat-8.0.24 tomca ...

  7. django网页分页

    blog/views.py from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger #导入分页插件包 def  ...

  8. 小米open-falcon监控系统接入手册

    一.新项目接入 0.官方文档: https://book.open-falcon.org/zh_0_2/usage/getting-started.html 1.联系运维人员确定可以使用监控系统: ( ...

  9. c++两个类相互调用

    有可能会碰到两个类之间的相互调用的问题,例如:定义了类A和类B,A中使用了B定义的类型,B中也使用了A定义的类型 class A { B b; }; class B { A a; }; 编译器在声明A ...

  10. 公司git服务器记录

    gitolite:server/web/AmomeWebApp.git gitolite:server/web/AmomeBackendManage.git git@192.168.1.183 === ...