Element-UI+Vue实现用户的删除操作

第一步：引入组件

为了避免用户不小心点击的删除按钮，我们应该在删除操作之前提示一下用户，这个时候依然需要使用Element-UI中的弹框组件——确认消息

 

但是我们使用这个组件的时候有一点特殊，以前我们是引入组件，然后Vue.component或Vue.use， 但是现在这个我们不了，在我们正常import之后我们需要下面这样：

Vue.prototype.$confirm = MessageBox.confirm

好处：以后我们在使用的时候，我们可以直接使用this+. 进行使用，更方便

第二步：按钮绑定事件

 <!-- 删除按钮 -->
 <el-button @click="removeUserById(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>

第三步：弹出确认提示框

        // 通过id值将用户删除
        async removeUserById(id){
            // 弹框询问用户是否删除数据
            // 第一个参数是提示信息   第二个参数是对话框的标题
           const confirmResult =  await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            // 指定确认按钮的文本
               confirmButtonText: '确定',
            //指定取消按钮的文本
               cancelButtonText: '取消',
            //通过type指定提示信息前面的小图标
               type: 'warning'
            }).catch(err=>{
                // 这个捕获一下错误，要不然我们点击“取消”按钮之后控制台会报错
                return err
            })

            // 如果用用户确认删除，则返回值为字符串 confirm
            // 如果用户取消了删除，则返回值为字符串 cancel
            // console.log(confirmResult)

             if(confirmResult !=='confirm'){
                // 说明用户不想删除
                return this.$message.info('已取消删除')
             }
            
            //  console.log('确认删除')
            
        }
    }

 

第四步：完成删除操作

 

      // 通过id值将用户删除
        async removeUserById(id){
            // 弹框询问用户是否删除数据
            // 第一个参数是提示信息   第二个参数是对话框的标题
           const confirmResult =  await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            // 指定确认按钮的文本
               confirmButtonText: '确定',
            //指定取消按钮的文本
               cancelButtonText: '取消',
            //通过type指定提示信息前面的小图标
               type: 'warning'
            }).catch(err=>{
                // 这个捕获一下错误，要不然我们点击“取消”按钮之后控制台会报错
                return err
            })

            // 如果用用户确认删除，则返回值为字符串 confirm
            // 如果用户取消了删除，则返回值为字符串 cancel
            // console.log(confirmResult)

             if(confirmResult !=='confirm'){
                // 说明用户不想删除
                return this.$message.info('已取消删除')
             }
            
            //  console.log('确认删除')
            const {data:res} = await this.$http.delete('users/'+id)
            
            if(res.meta.status !==200){
                return this.$message.error('删除用户失败')
            }

            this.$message.success('删除用户成功！')
            this.getUserList()
        }
    }