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

ゝ一纸荒年。 2024-04-03 09:44 44阅读 0赞

## 第一步：引入组件 ##

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

![ed4cadeebe5d4ccca3d8febaef52dffb.png][]

![f84bb1d671864b288570940f9c7f0361.png][]

但是我们使用这个组件的时候有一点特殊，以前我们是引入组件，然后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('确认删除')
                
            }
        }

![b886317f82634aeb93246752d83c603e.png][]

## 第四步：完成删除操作 ##

![ac3d92a6127542648c211b5f010e7186.png][]

![fda44cf8edaf409f8606683aeb7111dd.png][]

![52ab47368c2149e0bc53b1dc044ff965.png][]

![bab55f07520742d2a1d0d082c2ede8b2.png][]

[ed4cadeebe5d4ccca3d8febaef52dffb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/df9aefd4406145dba1e0bfbda5a49058.png
[f84bb1d671864b288570940f9c7f0361.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/14638e71bc064636a01b013490da685a.png
[b886317f82634aeb93246752d83c603e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5827697dcc834967b82eee690daf9f7a.png
[ac3d92a6127542648c211b5f010e7186.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/55142b24d34b4792b5b43b60b182c464.png
[fda44cf8edaf409f8606683aeb7111dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b3ac178592144ced9739d42182e33c67.png
[52ab47368c2149e0bc53b1dc044ff965.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b1471a3fee194d5aae402e6be9bb35ec.png
[bab55f07520742d2a1d0d082c2ede8b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7cff32d2f8af4c74a250b6d52628a02b.png