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. python challenge - map.py

    Hint: K->M    O->Q    E->G everybody thinks twice before solving this. g fmnc wms bgblr rpy ...

  2. Linux 时间修改--date -s命令

    Linux 时间修改 不重启修改时区 一.修改linux的时间root使用date指令:date -s1.只修改日期,不修改时间,输入:Linux代码 1. date -s 2007-08-03 da ...

  3. 非常酷的 Javascript 简单调试工具Blackbird

    Blackbird 是一个开源的 Javascript 调试工具,默认提供一种非常酷的方式展现 Javascript 调试信息,如下图,效果如何呢? 在我们的日常的学习或工作中,经常都会接触到 Jav ...

  4. Silverlight Telerik RadGridView动态增删行及行列操作(转载)

    最近使用一直使用第三方控件Telerik,版本 2011 Q1,一直使用显示控件RadGridView,使用起来比DataGird好使, 也发现有控件问题. radgridview.BeginInse ...

  5. Avira Free Antivirus 小红伞免费杀毒软件广告去除工具

    Avira Free Antivirus 小红伞免费杀毒软件经常跳出广告, 用起来比较烦, 这里提供一个广告去除的免费小工具. 原理就是用组策略来阻止广告的跳出, 网上到处都是. 一键傻瓜式去除, 也 ...

  6. 234. Palindrome Linked List【easy】

    234. Palindrome Linked List[easy] Given a singly linked list, determine if it is a palindrome. Follo ...

  7. 常用校验算法CRC、MD5、SHA_转

    1.算法概述 数据摘要算法是密码学算法中非常重要的一个分支,它通过对所有数据提取指纹信息以实现数据签名.数据完整性校验等功能,由于其不可逆性,有时候会被用做敏感信息的加密.数据摘要算法也被称为哈希(H ...

  8. linux 免密登录

    ssh-keygen -t rsa -P "" ssh-copy-id -i ~/.ssh/id_rsa.pub root@服务器地址

  9. 【Mac + Appium】之运行报错:[UiAutomator] UiAutomator exited unexpectedly with code 0, signal null

    产生下面的原因是因为:与uiautomator2的weditor冲突,两者不能同时使用. 有时打开appium时会报错: [UiAutomator] UiAutomator exited unexpe ...

  10. js 简单的样式封装

    <script> function test(value){ var str=value; document.write("<div style=\"width: ...