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. html 5 中的 6位 十六进制颜色码 代表的意思180313

    人的眼睛看到的颜色有两种: ⒈ 一种是发光体发出的颜色,比如计算机显示器屏幕显示的颜色: ⒉ 另一种是物体本身不发光,而是反射的光产生   的颜色,比如看报纸和杂志上的颜色. 我们又知道任何颜色都是由 ...

  2. @using (Html.BeginForm()) @using (Ajax.BeginForm(new AjaxOptions() { })) 区别

    @using (Html.BeginForm()) 返回页面 也是页面 都是返回页面 只是 多了一个 data-ajax="true"

  3. Sublime text 3 搭建Python3 IDE

    起因:为了提高编码工作中的体验,Sublime Text:不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受. Vim难于上手,Eclipse,VS 体积庞大,即便体积轻巧迅速启动的 ...

  4. JQuery最佳实践及常见错误(转自 简书)

    1 使用JQuery的ready处理器 如果你的代码操作DOM,则需要DOM加载完成后再运行代码.推荐使用如下的第一种写法,第二种写法在JQuery3.x中已经不推荐使用了. $(function ( ...

  5. Atitit,通过pid获取进程文件路径 java php  c#.net版本大总结

    Atitit,通过pid获取进程文件路径 java php  c#.net版本大总结 1. 通过PID获取进程路径的几种方法2 1.1. GetModuleFileNameEx 想获得进程可执行文件的 ...

  6. C# 获取或设置本地打印机及配置文件操作

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  7. Python内置函数之bool()

    该函数是一个类对象 class bool([x]) bool()只能传入一个参数. bool()用来判断对象是否为True,返回值为True或者False. 下面看看例子: >>> ...

  8. 第八章 springboot + mybatis + 多数据源3(使用切面AOP)

    引入 aop包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  9. linux命名空间详解_转

    转自: Linux的命名空间详解--Linux进程的管理与调度(二) Linux Namespaces机制提供一种资源隔离方案. PID,IPC,Network等系统资源不再是全局性的,而是属于特定的 ...

  10. linux 个人测试用例

    1. 我想在某个目录下, 找到某个文件中有某个字符(leon)的文件, 并列出来? (如果是在windows下, 可能需要一个文件一个文件的看, 但是在 linux 下可以实现) find . –ma ...