上个小节我们用Swagger测试了后端的Web方法,成功的修改了用户信息。那么本小节我们要完成的是前端页面的JS程序。因为新增用户和修改用户的弹窗页面是相同的,所以这里我就不配图了。
在user.vue页面中为更新按钮设置点击事件回调函数,这样才能显示弹窗页面。
<el-table-column fixed="right" header-align="center" align="center"
width="150" label="操作">
<template #default="scope">
<el-button type="text" size="medium" v-if="isAuth(['ROOT', 'USER:UPDATE'])"
@click="updateHandle(scope.row.id)">
修改
</el-button>
……
</template>
</el-table-column>
updateHandle: function(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},