Vue表格中时间的处理
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表格中时间的处理的更多相关文章
- Vue表格中,对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
- vue表格中显示金额格式化与保存时格式化为数字并校验!
最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用! 一 数字转金额格式显示 //数字转金额格式 format:function(s){ if(/[^0-9\.]/.test(s) ...
- iview+vue 表格中添加图片
开门见山,话不多说,要在表格中添加图片,可以使用td: <table " width="100%"> <tr class="tr-style ...
- vue 表格中的下拉框单选、多选处理
最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...
- vue:表格中多选框的处理
效果如下: template中代码如下: <el-table v-loading="listLoading" :data="list" element-l ...
- 在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
一般来说,录入数据的时候,我们都采用在一个窗体界面中,根据不同内容进行录入,但是有时候涉及主从表的数据录入,从表的数据有时候为了录入方便,也会通过表格控件直接录入.在Winform开发的时候,我们很多 ...
- 关于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 ...
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- vue+Element 表格中的树形数据
template部分 只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...
随机推荐
- 2014哈商大ICPC/ACM校赛解题报告
被debug邀请去參加校赛,哎,被虐..我对不起工大.. 由于本人不搞ACM,算法处于HelloWorld水准.. 虽然题目除了鸟不拉屎星人之外都非常水,但我能做到这个程度,全然是超水平发挥了.. 数 ...
- HTTP协议--cookie、session、缓存与代理
1 Cookie和 Session Cookie和 Session都为了用来保存状态信息,都是保存客户端状态的机制,它们都是为了解决 HTTP无状态的问题而所做的努力. Session可以用 Cook ...
- ajaxform 提交,返回JSON时,IE提示下载的问题解决
在使用AJAXform提交表单时,返回的数据格式为JSON,头文件是application/json 时,在 火狐.ie9和谷歌下都能正常解析,在ie7下会提示下载. 解决方法:指定返回页的头文件为& ...
- Hive 作业优化
1.Join原则将条目少的表/子查询放在 Join的左边. 原因是在 Join 操作的 Reduce 阶段,位于 Join左边的表的内容会被加载进内存,将条目少的表放在左边,可以有效减少发生内存溢出的 ...
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
Atitit.监听键盘上下左右方向键事件java js jquery c#.net 1. Keyword1 2. 通用的实现流程1 3. Js的实现1 3.1. Bind control ,eve ...
- ffffff
http://www.ibm.com/developerworks/cn/linux/l-cn-linuxglb/ http://blog.csdn.net/wocjj/article/details ...
- error: unkown OS type hvm 解决方法 kvm libvirtd 重新加载已有虚拟机信息
想验证下最新版本的qemu的一些功能,于是将其从qemu-0.12升级到了qemu-1.4,编译安装一切都很顺利,但是当创建virtual machine时,报错如下: [root@compute-- ...
- mock中测试private方法,不是mock
Method method = PowerMockito.method(CategoryController.class, "getCategory",List.class);// ...
- Pairs Forming LCM 在a,b中(a,b<=n)(1 ≤ n ≤ 10^14),有多少组(a,b) (a<b)满足lcm(a,b)==n; lcm(a,b)=p1 ^ max(a1,b1) * p2 ^ max(a2,b2) *..........*pn ^ max(an,bn)
转自:http://www.cnblogs.com/shentr/p/5285407.html http://acm.hust.edu.cn/vjudge/contest/view.action?ci ...
- windows无法设置防火墙
无法打开防火墙,出现错误代码0x80070422,解决方法:windows开始键->运行->调出运行窗口,输入services.msc,(或者控制面板->管理工具->服务)找到 ...