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 ...
随机推荐
- lua类库 middleclass学习笔记
middleclass使在lua中面象对象变的简单 抄了一遍他的示例代码运行着试了试,基本懂了 local class = require 'middleclass' --类的继承 Person = ...
- 2B01-View-Switcher
Gallery和swithcer联合使用 /* * Copyright (C) 2007 The Android Open Source Project * * Licensed under the ...
- PCIE博文链接
http://blog.csdn.net/mao0514/article/category/1518607/1
- C#检测浏览器类型 Detect Browser
private void Button1_Click(object sender, System.EventArgs e) { System.Web.HttpBrowserCapabilities b ...
- 283. Move Zeroes【easy】
283. Move Zeroes[easy] Given an array nums, write a function to move all 0's to the end of it while ...
- python模块学习之logging
filename:用指定的文件名创建FiledHandler(后边会具体讲解handler的概念),这样日志会被存储在指定的文件中. filemode:文件打开方式,在指定了filename时使用这个 ...
- centos7下安装mysql5.7和jdk 1.8
安装mysql5.7 具体安装过程可参见官网:A Quick Guide to Using the MySQL Yum Repository 进入/usr/local/src文件夹. cd /usr/ ...
- cf #363 a
A. Launch of C time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- 2017 Wuhan University Programming Contest (Online Round) Lost in WHU 矩阵快速幂 一个无向图,求从1出发到达n最多经过T条边的方法数,边可以重复经过,到达n之后不可以再离开。
/** 题目:Lost in WHU 链接:https://oj.ejq.me/problem/26 题意:一个无向图,求从1出发到达n最多经过T条边的方法数,边可以重复经过,到达n之后不可以再离开. ...
- Mybatis结果生成键值对
在实际应用中我们经常会遇到这样的情况,需要给下拉框赋值,这个时候就需要键值对了,具体使用方法如下 1,在maper.xml文件中定义结果类型(resultType)定义为hashmap,如下所示 &l ...