vue中删除表格中的一行记录后，如何让表格更新（性能优化）

最新推荐文章于 2024-08-08 22:30:15 发布

cocogogogo

最新推荐文章于 2024-08-08 22:30:15 发布

阅读量3.9k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/cocogogogo/article/details/124348306

版权

在Vue.js前端应用中，删除表格行并更新页面通常涉及两次HTTP请求。一种常见做法是删除后刷新整个表格数据，但这会导致性能问题。为优化性能，可以在接收到删除成功的响应后直接从本地数据中移除对应行，从而实现页面更新，避免不必要的数据重新获取。

摘要由CSDN通过智能技术生成

在vue中，我们点击删除按钮发送请求删除了表格中的一行记录，这时候数据库中已经删除了，但是页面还没更新，所以我们常常发送请求重新获取表单数据，这样页面也就会更新了。
但是如果使用这种做法，那么每次删除将会发两次请求，所以我们可以在删除后不进行重新获取数据，而是将原本的数据中的一行删除，这样也可以做到更新数据

// 删除
async deleteCategory(index) {
let result = await deleteCategory({_id})
if(result.code === 200){
  // 不发请求更新页面	
  this.categoryList.splice(index, 1)
  this.$message.success(result.message)
}else{
  this.$message.error(result.message)
}
},