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

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('获取用户列表失败！')
      }
    }, (