Vue: 批量更新操作实现与踩坑记录

最新推荐文章于 2024-07-18 17:59:36 发布

scut_少东

最新推荐文章于 2024-07-18 17:59:36 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 前端文章标签：前端 Vue 批量更新

本文链接：https://blog.youkuaiyun.com/qq_33594380/article/details/79800939

博客详细描述了在Vue中实现批量更新操作的过程，包括功能需求、组件结构、实现思路和潜在的Bug。在批量更新房间信息时，由于未修改记录导致的更新错误被提出，原因是MySQL对无变更更新的响应可能导致后端判断错误。解决方案包括通过setTimeout修正this指向问题，或者在watch中比较新旧值地址来避免不必要的通知。

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

1. 功能需求

从后端获取到的房间列表包含房间号、房间类型、房间人数、性别四个参数。用户在列表中可以修改任意记录的任意参数，点击保存修改的时候将修改提交到服务器，实现批量更新。

2. 组件树结构

Page

|--LocationText

|--SideBar

|--MainContent

|--HeadLine

|--RoomUnit（一个单元包含一条完整的记录）

|--BottomButton

3. 实现思路

3.1 列表初始化

MainContent 中发送ajax 请求获取房间及其信息列表

GetRoomInfo () {
  this.apiGet('/admin/room', {})
    .then((res) => {
      console.log(res)
      if (res.errcode == 0) {
        this.roomList = res.data
      } else {
        alert('获取用户列表失败！')
      }
    }, (err) => {
      console.log(err)
    })
}