Vue中表格的数据应该来自后台数据库,然后从数据库中读取到的数据,时间格式可能有些不同,我们可以根据实际需要来对这个时间进行转化。

这里介绍一个js库,它提供了强大的日期处理功能,功能强大且只有2k大小。安装方式简单,只需要npm install fecha --save即可。

Formatting(日期格式化)

fecha提供一个format方法。fecha.format接收一个Date对象(或一个时间戳)和一个字符串形式的日期格式,然后返回一个字符串(处理后的日期)。

注意: 当传入的参数无效时,fecha会报错

Parsing(日期解析)

fecha另外提供了一个parse方法。和format类似,fecha.parse接收一个Date字符串和一个字符串形式的日期格式,然后返回一个Date对象。

注意: 当传入的参数无效时,fecha会报错

fecha还有其他很多功能,这里不做具体介绍,有兴趣请自行百度学习。

这里放一个demo,以供参考。

html

<el-table-column prop="time" label="时间" :formatter="dateFormat" min-width="100"></el-table-column>

js

  methods: {
dateFormat(row, column, cellValue) {
return cellValue ? fecha.format(new Date(cellValue), 'YYYY-MM-DD') : '';
}
}

恩,就酱~

Vue表格中时间的处理的更多相关文章

  1. Vue表格中,对数据进行转换、处理

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...

  2. vue表格中显示金额格式化与保存时格式化为数字并校验!

    最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用! 一 数字转金额格式显示 //数字转金额格式 format:function(s){ if(/[^0-9\.]/.test(s) ...

  3. iview+vue 表格中添加图片

    开门见山,话不多说,要在表格中添加图片,可以使用td: <table " width="100%"> <tr class="tr-style ...

  4. vue 表格中的下拉框单选、多选处理

    最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...

  5. vue:表格中多选框的处理

    效果如下: template中代码如下: <el-table v-loading="listLoading" :data="list" element-l ...

  6. 在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较

    一般来说,录入数据的时候,我们都采用在一个窗体界面中,根据不同内容进行录入,但是有时候涉及主从表的数据录入,从表的数据有时候为了录入方便,也会通过表格控件直接录入.在Winform开发的时候,我们很多 ...

  7. 关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg)"> (这事设置背景图片) <img src="images/bbs_student1.gif" />如果是这样的就是直接插入图片。你看看,...

    关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg ...

  8. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  9. vue+Element 表格中的树形数据

    template部分   只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...

随机推荐

  1. tomcat war包自动化部署脚本

    #/bin/bash #带发布build的war包名称 war_name="weiFeng.war" war_dir="/home/deploy/wei_feng_tar ...

  2. Sql Server2005 Synonyms

    1. 同义词(SYNONYM)是SQL Server 2005中新特性 它是一种对已有的或潜在的新对象给予的别名.可以在同一个数据库或者跨数据中中使用这个别名,这个别名替代了原有对象.可以建别名的对象 ...

  3. C#中ArrayList类的使用

    ArrayList类 使用大小可按须要动态添加的数组实现IList接口 命名空间:System.Collections 程序集:mscorlib 语法: public class ArrayList: ...

  4. C#--I/O流操作文本文件之StreamWrite类和StreamReader类

    使用I/O流操作文本文件时主要用到StreamWrite类和StreamRead类. 1.StreamWrite类 (1)StreamWrite类专门用来处理文本文件的类.能够方便地想文本文件里写入字 ...

  5. 简体字丶冯|服务网关kong-docker安装

    tags: kong ,服务网关,docker安装教程 grammar_cjkRuby: true --- 作为一名技术探索者,想了解一个未知系统的最有效方法就是去用.然而搭建一个陌生系统的最快捷方法 ...

  6. SpringCloud系列十:使用Feign实现声明式REST调用

    1. 回顾 前文的示例中是使用RestTemplate实现REST API调用的,代码大致如下: @GetMapping("/user/{id}") public User fin ...

  7. Atitit  OOCSS vs bem

    Atitit  OOCSS vs bem     1. 今天最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似的技术存在,如BEM.1 2. CSS设计模式:OOCSS 和 SMACSS1 2 ...

  8. Mac系统下配置JDK及MAVEN环境变量配置

    1. 启动终端Terminal 2.进入当前用户的home目录 输入cd ~ 3.临时授权,sudo su: 输入密码(密码不显示): 4.创建.bash_profile 输入touch .bash_ ...

  9. 60. Search Insert Position 【easy】

    60. Search Insert Position [easy] Given a sorted array and a target value, return the index if the t ...

  10. linux shell自动输入实现

    1 #!/bin/sh 2  3 while read line 4 do 5         str=$line 6         var1=`echo $str|awk -F ' ' '{pri ...