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",
}
]
}
前端处理
先来看下未处理的日期格式
前端处理需要安装下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库格式化处理后端传的日期的更多相关文章
- Vue接收后端传过来excel表格的文件流并下载
题外话:当接收文件流时要确定文件流的类型,但也有例外就是application/octet-stream类型,主要是只用来下载的类型,这个类型简单理解意思就是通用类型类似 var .object.ar ...
- ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!
前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...
- 2018年度 35 个最好用 Vue 开源库
在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠 ...
- 35 个最好用的 Vue 开源库
35 个最好用的 Vue 开源库 Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面. 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统.它提 ...
- .Net Core+Vue.js+ElementUI 实现前后端分离
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...
- Github 上 36 个最实用的 Vue 开源库
任何一个开发者,都是十分喜欢使用开源软件包的.因为它使开发工作变得更快速.高效.容易.如果没有开源软件包,开发工作将变得疲惫不堪,不断的重复造轮子! 下面整理了 Github 上 36 个实用的 Vu ...
- 35 个最好用 Vue 开源库
2018年度 35 个最好用 Vue 开源库 在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包 ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- mac下svn问题——“.a”(静态库)文件无法上传解决
mac下svn问题——“.a”(静态库)文件无法上传解决 “.a”(静态库)文件无法上传(svn工具:Versions) 网上查询了一下,说是Xcode自带的svn和Versi ...
随机推荐
- VueJs学习参考的例子
his is a vue+mint's demo ,for loler(PAD LOL) https://github.com/yuanman0109/vue2.0-Mint-lolbox An ...
- Linux Ipv6地址配置
Step1:启用IPV6网络配置 [root@node-1 ~]# vi /etc/sysconfig/network NETWORKING_IPV6=yes //全局启用ipv6初始化IPV6_ ...
- php中对象赋值问题
今天遇到一个问题, 一开始拼接的SQL语句,然后想多次使用时发现会被重置,然后想到给重新赋值一次,但是发现这样赋值会出问题,百思不得其解,最后经过搜索,发现PHP中对象赋值给一个变量之类的赋值的其实是 ...
- 文件上传的UI自动化
from pywinauto.application import Application import win32gui handle = win32gui.FindWindow("#32 ...
- Linux top命令中CPU信息的详解(转)
add by zhj: 下面的文章解释的很好了,这里再说明一下top命令中wa的含义,我们知道,当IO阻塞时,操作系统会把进程改为阻塞态,将CPU调度到运行其它进程. CPU在空闲状态下,会检查是否有 ...
- linux虚拟机配置上网(静态IP)和配置tomcat服务环境
常用命令:vi或者vim编辑 ,按i编辑模式,按ecs进入基本模式,按 :w 保存:按 :wq 退出并保存:mv移动::q退出 :ln -sv apache-tomcat-8.0.24 tomca ...
- django网页分页
blog/views.py from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger #导入分页插件包 def ...
- 小米open-falcon监控系统接入手册
一.新项目接入 0.官方文档: https://book.open-falcon.org/zh_0_2/usage/getting-started.html 1.联系运维人员确定可以使用监控系统: ( ...
- c++两个类相互调用
有可能会碰到两个类之间的相互调用的问题,例如:定义了类A和类B,A中使用了B定义的类型,B中也使用了A定义的类型 class A { B b; }; class B { A a; }; 编译器在声明A ...
- 公司git服务器记录
gitolite:server/web/AmomeWebApp.git gitolite:server/web/AmomeBackendManage.git git@192.168.1.183 === ...