关于#javascript#的问题：表格中的倒计时，如何结束时间endTime减去现在时间

Question

表格中的倒计时，如何结束时间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>

Answer 1

计时器定时更新

<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>