vue动态计算表格列两个时间的差值

方法中用到了插件moment.js，使用day.js也是一样的。这两个时间工具超好用，不知道的快去了解一下，从此不需要new Date()。
moment官网地址：http://momentjs.cn/
day.js官网地址：https://dayjs.fenxianglu.cn/
它们两个的用法基本是一样的，学会一个就可以了。

效果如图：

先来描述一下需求：row中有开始时间，我需要用当前时间减去开始时间计算他们相差多少分钟。

html部分：

   <vxe-column title="故障时长/m" width="120"><template #default="{ row }"><span>{{ handleTimeLength(row.happenTime) }}</span></template></vxe-column>

方法部分：

     import moment from 'moment'function handleTimeLength(time) {let timeLength = moment().diff(time, "minutes"); return timeLength;}

moment(） - - -  获取当前时间
moment().diff('需要与之计算时间差的时间'，'类型')  - - -  类型为minutes是计算两个时间相差多少分钟，hours是小时，days是天，seconds是分钟，看需求传参。
如果你想计算两个指定时间的差值 moment('时间1').diff('时间2'，'类型')

另外提一句，我这个function的写法是vue3.0的写法，vue2.0不需要加function,而且moment前面需要加this关键字哦。而且安装完moment之后不要忘记引入~

再提一句我的表格插件不是用的ant-design-vue自带的表格组件，用的是vxe-table这个组件库，这也是个宝藏组件库！！如果有想了解关于vxe-table的相关内容可以留言告诉我，看到会回复的。
vxe-table官网地址：https://vxetable.cn/v4/#/table/start/install

一定要学会moment！！！超级好用！！觉得有用的话点个赞~

vue动态计算表格列两个时间的差值相关推荐

如何使用Python计算Log中两个时间的差值
有时候需要计算两个时间之间的差值,如果用口算很容易出现失误,这时候借助于Python就可以很容易地解决该问题1.按如下步伐操作,能有现成计算的直接用现成的,没有的再自己写函数 2.打包成exe,方便传 ...
【MySQL】# mysql计算两个时间的差值
TIMESTAMPDIFF(format, start_date, end_date) format:以何种方式(天,小时,分钟,秒-)计算时间的差值 start_date:开始时间 end_date ...
mysql计算某个两个时间的差值
1.利用TO_DAYS函数 TO_DAYS ('2019-03-15') - TO_DAYS(now()) 2.利用DATEDIFF函数 3.利用TIMESTAMPDIFF函数计算两日期时间之间相差 ...
两个时间的差值Java,Java如何找到两个时间之间的差值？
下面的代码片段向您展示了如何找到LocalTime类表示的两个时间对象之间的差异.要获得两个LocalTime对象之间的差异,我们可以使用持续时间.between()方法.这个方法返回一个Durati ...
Oracle 计算两个时间的差值
有两个日期数据START_DATE,END_DATE,欲得到这两个日期的时间差(以天,小时,分钟,秒,毫秒): 天: ROUND(TO_NUMBER(END_DATE - START_DATE)) 小 ...
timestamp(6) oracle计算差值_Oracle 计算两个时间的差值
--天的间隔 SELECT FLOOR(SYSDATE - TO_DATE('20110805', 'yyyyMMdd')) FROM DUAL; --获得相隔时间的相差天数 SELECT CEIL( ...
MySQL 计算两个时间的差值
TIMESTAMPDIFF(type,exp2,exp1) type:year,month,day,HOUR,min,second等例如:select TIMESTAMPDIFF(SECOND,'2 ...
js计算两个日期时间的差值
1,计算两个时间的差值: let date1 = new Date('2020-12-02 12:30:54')let date2 = new Date('2020-12-02 15:38:09')l ...
FineUIMvc随笔（1）动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

vue动态计算表格列两个时间的差值

vue动态计算表格列两个时间的差值相关推荐

最新文章

热门文章