删除表格一行数据并更新后表格数据无变化的解决方法

光年在眼前

于 2022-11-29 21:28:23 发布

阅读量1.6k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_46634315/article/details/128105548

版权

前端开发数据同步删除操作更新请求延迟更新

关键词由CSDN通过智能技术生成

博客讲述了在前端开发中遇到的一个问题，即删除表格数据后，前端未能正确更新显示。作者发现原因是删除操作未完成时前端已发起更新请求。提出了两种解决方案：一是等待删除确认后再更新，二是使用延时函数确保删除完成。推荐采用前者作为更规范的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在一个小项目中遇到这样一个问题，我在前端页面中删除表格中的一行数据，数据库中已经删除，且重新更新了数据并显示，但是表格重新显示的还是之前的数据。查阅网上的资料后，尝试网友的方法，使用v-showCard命令来控制，当数据没有更新结束之前不显示，当数据重新更新后再显示，但是我这样还是失败了。

后来，我发现，可能是删除数据后，前端立刻发送更新数据请求，但此时删除操作还没有结束，原来的数据还在，因此重新请求的数据没有变化。这种情况就需要控制在删除操作结束后再更新数据。

一种方法是可以判断删除是否成功，获得成功后再更新。另一种是删除数据发送后，前端睡眠一会儿（150ms），确保后端成功删除了再发送更新数据请求。相关代码如下：

//...
deleteById(key)
await sleep(200)
//...

//睡眠方法  
const sleep = (ms) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, ms)
    })
  }
//...

不过还是推荐第一种方法，那样更加规范。