Ant-Design Table中使用 AStatisticCountdown倒计时，鼠标在表格上移动时倒计时被重置

目录

一、问题

二、原因及解决方法

三、总结

---

一、问题

1.在ATable的插槽中给单元格写了一个 AStatisticCountdown倒计时，但是鼠标在表格上移动倒计时就会被重置。

2.代码如下：

      <template #headerCell="{ column }"><template v-if="column.key === 'promiseTime'"><AStatisticCountdown :value="getCountDown(record)" :valueStyle="{ fontSize: '14px' }" prefix="倒计时:" /></template></template>/**倒计时 */
function getCountDown(item: GetReportListResultItem) {return Date.now() + item.countDown * 1000
}

二、原因及解决方法

1.真是奇了怪，放在表格外面的渲染是正常的。

2.通过console打印发现，鼠标在表格上移动时，通过#bodyCell插槽加载的内容里面的函数都会被重新执行，也就是会重新生成绘制指令。

3.Date.now()+ item.countDown * 1000表示：以Date.now()为基准倒计时 item.countDown * 1000 s。 我在getCountDown里面使用 Date.now()获取基准时间，鼠标移动触发了getCountDown函数，Date.now()每次获取到的都是新的初始时间，基准时间改变了所以倒计时也重新计时了。

4.解决办法：把Date.now()提出来，只初始化基准时间一次。

        代码如下：

const now = Date.now()
/**倒计时 */
function getCountDown(item: GetReportListResultItem) {return now + item.countDown * 1000
}

三、总结

1. 对于ATable插槽中的函数，鼠标移动就会重新执行，对于无需在鼠标移动时修改的值（大多数情况下）需要放在函数外面声明。例如：倒计时的初始基准时间

2. 对于ATable插槽中的函数鼠标移动就会重新执行，我觉得很不能理解。

        1)为什么不只是单纯的改样式呢，为什么要重新执行函数？表格滚动、鼠标移动经常会有呀，但是需要重新执行函数的场景在哪里呢？

        2)退一步来讲，就算有函数需要重新执行，也需要做好节流吧，感觉现在鼠标随便动一下，都执行了n次函数。

        3)如有大佬知道其中原因，希望不吝赐教，非常感谢！

/*

希望对你有帮助！

如有错误,欢迎指正,谢谢！

*/