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

前端处理

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>

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

本篇结束

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云TStack专栏

对象存储,了解一下

? 对象存储,通常指 S3 (Simple Storage Service) 服务,由AWS提供公有云服务,而 Ceph 也可以提供兼容 S3 协议的对象存储...

6162
来自专栏Laoqi's Linux运维专列

Saltstack 远程操作(grains,pillar)服务安装+配置管理

2237
来自专栏pangguoming

Windows下RabbitMQ安装及入门

1.Windows下安装RabbitMQ需要以下几个步骤    (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,...

3497
来自专栏个人分享

Redis简介及3.0.2编译安装

Redis是一个key-value存储系统。和Memcached类似,它支持存储的value类型相对更多,包括string(字符串)、list(链表)、set(...

962
来自专栏Laoqi's Linux运维专列

Linux入门到精pao通lu

2554
来自专栏前端小叙

vue报错集锦

1、vue报错: 没安装 less-loader css-loader style-loader        可能的很大原因:没安装less 2、vuex报错...

4466
来自专栏FreeBuf

Cookiel劫持测试工具 – Cookie Injecting Tools

Cookie Injecting Tools 是一款简单的开源cookie利用工具,是Chrome浏览器上开发的一个扩展插件,能够灵活地进行SQL注入测试,编辑...

2577
来自专栏有趣的django

10.Flask上下文

 应用上下文和请求上下文都是存放在一个‘LocalStack’的栈中,和应用app相关的操作就必须要用到应用上下文,比如通过current_app获取当前的这个...

831
来自专栏DOTNET

【翻译】MongoDB指南/CRUD操作(三)

【原文地址】https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Tran...

2909
来自专栏用户2442861的专栏

HTTP POST GET 本质区别详解

    一般在浏览器中输入网址访问资源都是通过GET方式;在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交

2531

扫码关注云+社区