目录

vue 中添加用户

2021年03月31日约 255 字预计阅读 1 分钟次阅读

目录

实现流程

在确认按钮上绑定点击事件：@click="addUser"，在 methods 方法中定义 addUser 事件，预验证通过后发起网络请求，调用添加用户的 api ，最后关闭对话框，刷新列表。

代码实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
addUser(){
    this.$refs.addFromRef.validate(async valid => {
        if (!valid) return 
        // 可以发起添加用户的网络请求
        const {data: res} = await this.$http.post(
            'users',this.addForm
        )

        if (res.meta.status !== 201){
            this.$message.error('添加用户失败！')
        }

        this.$message.success('添加用户成功！')
        //隐藏添加用户对话框
        this.addDialogVisible = false
        //重新获取用户列表数据
        this.getUserList()
    })
}