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. Hibernate中所有包作用详细讲解

    http://liyanblog.cn/articles/2012/09/17/1347848802900.html Hibernate一共包括了23个jar包,令人眼花缭乱.本文将详细讲解Hiber ...

  2. http协议---简述

    http(Hypertext transfer protocol)超文本传输协议,通过浏览器和服务器进行数据交互,进行超文本(文本.图片.视频等)传输的规定. 也就是说,http协议规定了超文本传输所 ...

  3. MySQL 使用 比较函数 INTERVAL() 函数 实现数据按区间分组

    首先看一下它的定义: INTERVAL(N,N1,N2,N3,..........) INTERVAL()函数进行比较列表(N1,N2,N3等等)中的N值.该函数如果N<N1返回0,如果N< ...

  4. UITabelViewCell自定义(zhuan)

    很多时候,我们需要自定义UITableView来满足我们的特殊要求.这时候,关于UITableView和cell的自定义和技巧太多了,就需要不断的总结和归纳.   1.添加自定义的Cell.   这个 ...

  5. scp命令的用法

    用法: scp 命令 scp 能够在 2个 linux 主机间拷贝文件: 命令基本格式: scp [可选參数] file_source file_target ====== 从 本地 拷贝到 远程 拷 ...

  6. JAVA自定义注解 ------ Annotation

    日常开发工作中,合理的使用注解,可以简化代码编写以及使代码结构更加简单,下面记录下,JAVA自定义注解的开发过程. 定义注解声明类. 编写注解处理器(主要起作用部分). 使用注解. 相关知识点介绍, ...

  7. PHP 关掉浏览器还会执行代码

    ignore_user_abort();//关掉浏览器,PHP脚本也可以继续执行. set_time_limit(0);// 通过set_time_limit(0)可以让程序无限制的执行下去 $int ...

  8. week 6: kernel regression

    华盛顿大学 machine learning regression 第六周笔记. 普通的回归方法是基于training set的整体性进行训练的,如果训练数据集 具有明显的分段性,那么普通的回归方法预 ...

  9. c/c++输入处理,制定变量参数和值

    void usage(char* s){ fprintf(stderr, "\n"); fprintf(stderr, "%s -s <source file> ...

  10. go语言获取字符串元素的个数

    1:获取字符串字节的个数,并按字节挨个输出 package main import ( "fmt" ) func main() { var str string = "a ...