Vue使用ElementUI的确认框进行删除操作(包含前后端代码)

本文介绍: 今天做自己项目的时候，有一个删除的业务，正好遇到了确认框，在此纪念一下。这里我是使用的Elem e n tUI的确认框！先看下我的页面布局吧由于使用起来比较简单，直接上代码了。总的来说，使用起来还是很简单的。后面遇到什么情况，再回来补充！

今天做自己项目的时候，有一个删除的业务，正好遇到了确认框，在此纪念一下。

首先Elem e n tUI的确认框是这么说明的：

从场景上说，Me ssa g eBo x 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Di a log

调用$confirm 方法即可打开消息提示，它模拟了系统的 confirm。Me ssa ge Bo x 组件也拥有极高的定制性，我们可以传入options作为第三个参数，它是一个字面量对象。type 字段表明消息类型，可以为success，error，info和warning，无效的设置将会被忽略。注意，第二个参数 title必须定义为St ring 类型

我们先看下原生ElementUI提供的确认框是什么样的吧：

官网地址：Element确认框

&lt;template&gt;
  <el-button type="text" @click="open"&gt;点击打开 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>

  <el-table-column fixed="right"  label="操作"  width="220" align="center" >
      <template slot-scope="scope"> 
        <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" >删除</el-button>
        <el-button type="warning" icon="el-icon-edit" size="small">编辑</el-button>
      </template>
    </el-table-column>

	 // 删除
    handleDelete(row) {
        // 确认框确认是否要删除
        this.$confirm("确定要删除"+row.userName+"吗?", "删除提示", {
          iconClass: "el-icon-question", //自定义图标样式
          confirmButtonText: "残忍删除", //确认按钮文字
          cancelButtonText: "留你小命", //取消按钮文字
          showClose: true, //是否显示右上角关闭按钮
          type: "warning", //提示类型  success/info/warning/error
      }).then(res=> {  //选择确认按钮进入此方法
          //确认操作
          alert('确认')
      }).catch(() => { //选择取消按钮进入此方法
        //取消操作
         alert('取消')
      });    
    }

 // 删除
    handleDelete(row) {
        // 确认框确认是否要删除
        this.$confirm("确定要删除"+row.userName+"吗?", "删除提示", {
          iconClass: "el-icon-question", //自定义图标样式
          confirmButtonText: "残忍删除", //确认按钮文字
          cancelButtonText: "留你小命", //取消按钮文字
          showClose: true, //是否显示右上角关闭按钮
          type: "warning", //提示类型  success/info/warning/error
      }).then(res=> {  //选择确认按钮进入此方法
          //确认操作 请求删除接口
         axios.get('http://localhost:9090/user/delete', {
          // 传递的参数
          params: {
            id:row.id //id,从row获取当前行的用户id
          }
          // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
          }).then(res =>{
              // 删除成功
              if(res.data.status===200){
              // 删除成功提示
                this.$message({showClose: true, message: '删除成功！',type: 'success', duration:1000,center:true});
                // 重新刷新最新的用户列表
                this.queryUserList();
              }
             
          }).catch(error =>{
             console.log(error)
          })
      }).catch(() => { //选择取消按钮进入此方法
        //取消操作
      });    
    }