上个小节我们定义了后端的Web方法，经过Swagger测试之后，修改会议室信息是没问题的，那么本小节咱们去实现修改会议室信息的前端JS代码。

因为添加会议室和修改会议室信息共用同一个弹窗页面，弹窗页面的代码我们都已经写完了，所以我们要回到会议室管理页面编写JS代码来显示弹窗页面，然后传入要修改的会议室ID，让弹窗页面去查询该会议室的信息。

<el-button
    type="text"
    size="medium"
    :disabled="!isAuth(['ROOT', 'MEETING_ROOM:UPDATE']) || scope.row.id == 0"
    @click="updateHandle(scope.row.id)"
>
    修改
</el-button>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8

meeting_room.vue页面上的修改按钮点击事件回调函数是updateHandle()，传入的参数是会议室ID，下面我们去声明这个函数。

updateHandle: function(id) {
    this.addOrUpdateVisible = true;
    this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
    });
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6

写完代码，同学们就可以运行前后端项目，修改一条部门信息试试。