使用ElementUI提供的MessageBox彈框組件中的“確認消息”，來實現對話框：

<template><el-button type="text" @click="open">點擊打開 Message Box</el-button> </template><script>export default {methods: {open() {this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '刪除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消刪除'}); });}}} </script>

其中“this.$confirm”就是用來彈出確認對話框的（這里需要先為VUE的原型對象掛載confirm函數），通過“.then”來指定確認之后的操作，通過“.catch”來指定用戶取消之后的操作。下面我們先為組件綁定confirm函數，我們在plugins/element.js下，引用“MessageBox”組件：

import Vue from 'vue' //篇幅原因，import中的其他項省略... import { MessageBox } from 'element-ui'//中間代碼省略... Vue.prototype.$confirm = MessageBox.confirm

需要傳遞要刪除的用戶ID即可。下面我們在剛剛的confirm對話框的“.then”中添加刪除用戶的網絡請求：

//根據ID刪除對應用戶信息 removeUserById(id){//彈框詢問用戶是否刪除數據this.$confirm('此操作將永久刪除用戶, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(async () => {const {data: res} = await this.$http.delete('users/'+id);if(res.meta.status!==200){return this.$message.error('刪除用戶失敗！');}this.$message({type: 'success',message: '刪除用戶成功!'});//重新獲取用戶列表數據this.getUsersList();}).catch(() => {this.$message({type: 'info',message: '已取消刪除' }); }); }

總結

以上是生活随笔為你收集整理的实现删除用户功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。