表格中的倒计时，如何结束时间endTime减去现在时间，得出还剩几天几时几分钟几秒
<template>
<a-table :columns="columns" :data-source="dataSource">
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
<a>{{ text }}a>
template>
<template v-if="column.dataIndex === 'time'">
<a>{{ text }}a>
template>
template>
a-table>
template>
<script>
import { defineComponent } from 'vue';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
time:'2023-4-1 00:00:00'
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
time:'2023-5-1 00:00:00'
},
]
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title:'倒计时',
dataIndex:'time',
key:'time'
}
]
export default defineComponent({
setup() {
return {
dataSource,
columns,
};
},
});
script>
计时器定时更新
<template>
<a-table :columns="columns" :data-source="dataSource">
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
<a>{{ text }}</a>
</template>
<template v-if="column.dataIndex === 'time'">
<a>{{ getCountdownStr(text) }}</a>
</template>
</template>
</a-table>
</template>
<script>
import { defineComponent ,ref} from 'vue';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
time: '2023-4-1 00:00:00'
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
time: '2023-5-1 00:00:00'
},
{
key: '2',
name: '胡彦祖过期',
age: 42,
address: '西湖区湖底公园1号',
time: '2023-3-1 00:00:00'
}
]
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title: '倒计时',
dataIndex: 'time',
key: 'time'
}
]
export default defineComponent({
mounted() {
setInterval(() => {
this.currentTime.cur = Date.now();
}, 1000);
},
setup() {
const currentTime = ref({ cur: Date.now() });
// const dataSource = ref(data);
const getCountdownStr = (time) => {
time = new Date(time.replace(/-/g, '/'));
let sec = Math.ceil((time.getTime() - currentTime.value.cur) / 1000);
if (sec <= 0) return '0天0时0分钟0秒';
let day = Math.floor(sec / 24 / 3600);
sec -= day * 24 * 3600;
let hour = Math.floor(sec / 3600);
sec -= hour * 3600;
let minute = Math.floor(sec / 60);
sec -= minute * 60;
return `${day}天${hour}时${minute}分${sec}秒`
}
return {
dataSource,
columns,
getCountdownStr,
currentTime
};
},
});
</script>
该回答引用GPT:
可以使用JavaScript中的Date对象来实现，可以获取当前时间和结束时间，然后计算出时间差，再将时间差转换成天、时、分、秒，最后拼接字符串输出。
<template>
<a-table :columns="columns" :data-source="dataSource">
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
<a>{{ text }}</a>
</template>
<template v-if="column.dataIndex === 'time'">
<a>{{ getTimeDiff(text) }}</a>
</template>
</template>
</a-table>
</template>
<script>
import { defineComponent } from 'vue';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
time:'2023-4-1 00:00:00'
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
time:'2023-5-1 00:00:00'
},
]
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title:'倒计时',
dataIndex:'time',
key:'time'
}
]
export default defineComponent({
setup() {
// 计算时间差
const getTimeDiff = (endTime) => {
const nowTime = new Date().getTime();
const endTimeStamp = new Date(endTime).getTime();
const timeDiff = endTimeStamp - nowTime;
const days = Math.floor(timeDiff / (24 * 3600 * 1000));
const leave1 = timeDiff % (24 * 3600 * 1000);
const hours = Math.floor(leave1 / (3600 * 1000));
const leave2 = leave1 % (3600 * 1000);
const minutes = Math.floor(leave2 / (60 * 1000));
const leave3 = leave2 % (60 * 1000);
const seconds = Math.round(leave3 / 1000);
return `${days}天${hours}时${minutes}分${seconds}秒`;
}
return {
dataSource,
columns,
getTimeDiff
};
},
});
如还有疑问，可留言帮助解决。
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！