【Vue3】根据录入时间计算持续时间（天、小时、秒）

通过 Vue3+Naive-UI 的数据表格组件为例，当已知一个录入时间，获取该数据的持续时间：

<template>
	<n-data-table :columns="columns" :data="data" />
</template>

<script lang="ts" setup>
	import { onMounted, ref, onDeactivated, onActivated } from 'vue';
	
	// 表格数据
	const data = ref([
	    { lrsj:'2024-12-01 12:31:40', cxsj: null},
	    { lrsj:'2024-12-07 16:40:53', cxsj: null}
	])
	const columns = ref([
	    { title: '录入时间', key: 'lrsj', ellipsis: { tooltip: true } },
	    { 
	        title: '持续时间', 
	        key: 'cxsj',
	        render (row: any) {
	            var value = row.cxsj / 1000; // 将毫秒转化为秒
	            var days = parseInt(value / 86400) > 0 ? parseInt(value / 86400) + "天" : ""; //天  24*60*60*1000
	            var hours = parseInt(value / 3600) - 24 * parseInt(value / 86400) > 0 ? parseInt(value / 3600) - 24 * parseInt(value / 86400) + "小时" : ""; //小时  60*60  总小时数-过去小时数=现在小时数
	            var mins = parseInt((value % 3600) / 60) ? parseInt((value % 3600) / 60) + "分" : ""; //分 - (day*24)  以60秒为一整份  取余 剩下秒数 秒数/60就是分钟数
	            var secs = isNaN(parseInt(value % 60)) ? "" : parseInt(value % 60) + "秒"; // 秒 60秒为一整份取余
	
	            return days + hours + mins + secs;
	        }
	    },
	])
	// 持续时间定时器
	const timer = ref<any>(null)
	
	// 进入页面刷新表格开启定时器（若调用后端接口获取录入时间，需要调用成功后也开启定时器）
	onActivated(() => {
		// 以下代码可以根据需求，封装成一个方法
	    if (!timer.value && data.value.length > 0) {
	        timer.value = setInterval(() => {
	            // 获取持续时间
	            data.value.forEach((item:any) => {
	                item.cxsj = Date.now() - new Date(item.lrsj).getTime()
	            });
	        }, 1000);
	    }
	})
	
	// 离开页面关闭定时器
	onDeactivated(() => {
	    if (timer.value) {
	        clearInterval(timer.value);
	        timer.value = null;
	    }
	})
	
	// 页面加载调用后端接口获取录入时间
	onMounted(() => {
		initData()
	})
	
	// 刷新表格数据
	function initData(){
	  // 每次刷新表格先停止定时器
	  if (timer.value) {
	      clearInterval(timer.value);
	      timer.value = null;
	  }
	
	  // 很多项目调用后端接口的函数都会进行封装，但是不管怎样改回调函数都会得到一个 result 参数
	  // interfaceFun：调用后端接口的方法名
	  // params：参数
	  // interfaceFun(params).then((result) => {
	  //   console.log(result) // 打印 result 查看后端传给前端的数据
	  //   // 表格数据赋值（这里以后端传给前端的数据为 result.data 为例）
	  //   data.value = result.data;
	    // 若没有调用后端接口，可直接执行以下if包裹的代码
	    if (!timer.value && data.value.length > 0) {
	      timer.value = setInterval(() => {
	        // 获取持续时间
	        data.value.forEach((item:any) => {
	          item.cxsj = Date.now() - new Date(item.lrsj).getTime()
	        });
	      }, 1000);
	    }
	  // })
	}
</script>

若使用的是Vue2，进入、离开页面的方法需要使用beforeRouteEnter()、beforeRouteLeave，具体查看：

【Vue2】清除定时器后定时器仍在运行