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

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

<el-button
    type="text"
    size="medium"
    :disabled="!isAuth(['ROOT', 'DEPT:UPDATE'])"
    @click="updateHandle(scope.row.id)"
>
    修改
</el-button>

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

updateHandle: function(id) {
    this.addOrUpdateVisible = true;
    this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
    });
}

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