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

r囧r小猫 2023-09-23 23:52 40阅读 0赞

## 前言 ##

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

> 这里我是使用的ElementUI的确认框！

首先ElementUI的确认框是这么说明的：

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

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

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

官网地址：[Element确认框][Element]

![在这里插入图片描述][97774115378746e5b88c7292027ff231.png]

我们点击看下长什么样子：

![在这里插入图片描述][f37c3804279b40918b138bc9cb405683.png]

原生代码：

<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>

官网提供给我我们使用说明和基本使用，下面我将按照官网的基础进行一些小小的升级和改造，顺便告诉大家一些使用技巧。

## 元素代码 ##

按钮上的代码比较简单，直接从element-ui使用复制即可

> 注意，这里有个坑，单机事件的方法名不能叫delete，这是一个关键词，不能使用，需要换一个名子，所以我才选择handleDelete！！！

这里我给方法传递了一个参数:scope.row，可以通过它获取这一行的全部数据，从而给后端传递相关的参数进行逻辑处理。

<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>

## js代码 ##

js相关的代码也十分简单。相关注释写在代码里面了，确认框提示的文案可以自由切换哦！

以下是我觉得重要且基本的一些属性：

![在这里插入图片描述][ae9975b8d19e4cb88473b2db6fe53635.png]

代码如下：

## 效果演示 ##

这样一个确认框就写好了，我们可以根据点击确认或者取消进行不同的逻辑操作

然后我们页面上测试一下吧

### 确认 ###

首先是确认操作

![在这里插入图片描述][e50e28de7dc143d0a7a482d639fc6f19.png]

### 取消 ###

然后是取消操作

![在这里插入图片描述][29576d7c17824a8481a46b523f4aaa48.png]

### 扩充 ###

这里还有一个属性:center

确认框文字是否居中,改为true即可居中，默认false

我个人觉得居中后太丑了。所以就没加到上面代码，大家知道即可，效果如下：

![在这里插入图片描述][8d063ec1514d4b80b1f5c274d969cedb.png]

![在这里插入图片描述][d031dbc1ecd7487496dc882719378349.png]

ps：不止这一个属性我没提到或者用到，还有很多属性，element-ui给我们提供了很多属性，大家根据孫的需求灵活运用即可，我上面说的都是我觉得最基本的属性。

![在这里插入图片描述][1a89acd0f83445209232cd6918979a1f.png]

## 删除逻辑编写 ##

### 前端代码 ###

这里写一个完整的删除逻辑，首先是前端代码，在刚才的代码基础上完善逻辑，使用axios发送请求并携带参数。

删除完之后一定要刷新列表哦，不然不容易发现数据变化！

关于如何封装一个公共的数据列表动态展示方法，可以参考:[Vue使用Element-UI的table组件和后端接口进行数据交互][Vue_Element-UI_table]

> 这里axios我用的是原生的，没有进行封装。因为后端崽目前还没学会！

// 删除
        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(() => {
         //选择取消按钮进入此方法
            //取消操作
          });    
        }

### 后端代码 ###

前端代码写好了当然离不开服务器接口的支撑，由于这是我自己写的项目，所以我的后端直接用MybatisPlus自带的删除(逻辑删除)就可以啦

![在这里插入图片描述][cc1aa570af9045619add3cb52f458295.png]

### 效果演示 ###

前后端代码都写好了，咱们就可以演示一波了。这里随便找一个幸运儿进行删除，这里我就拿第一行开刀了！

![在这里插入图片描述][12708f73661a487e9dd53a8099c23da8.png]

点击确认，数据消失！

![在这里插入图片描述][618f9b92034a414fb948b9a8d4ab9de0.png]

## 总结 ##

总的来说，使用起来还是很简单的。后面遇到什么情况，再回来补充！

[Element]: https://element.eleme.cn/#/zh-CN/component/message-box
[97774115378746e5b88c7292027ff231.png]: https://img-blog.csdnimg.cn/97774115378746e5b88c7292027ff231.png
[f37c3804279b40918b138bc9cb405683.png]: https://img-blog.csdnimg.cn/f37c3804279b40918b138bc9cb405683.png
[ae9975b8d19e4cb88473b2db6fe53635.png]: https://img-blog.csdnimg.cn/ae9975b8d19e4cb88473b2db6fe53635.png
[e50e28de7dc143d0a7a482d639fc6f19.png]: https://img-blog.csdnimg.cn/e50e28de7dc143d0a7a482d639fc6f19.png
[29576d7c17824a8481a46b523f4aaa48.png]: https://img-blog.csdnimg.cn/29576d7c17824a8481a46b523f4aaa48.png
[8d063ec1514d4b80b1f5c274d969cedb.png]: https://img-blog.csdnimg.cn/8d063ec1514d4b80b1f5c274d969cedb.png
[d031dbc1ecd7487496dc882719378349.png]: https://img-blog.csdnimg.cn/d031dbc1ecd7487496dc882719378349.png
[1a89acd0f83445209232cd6918979a1f.png]: https://img-blog.csdnimg.cn/1a89acd0f83445209232cd6918979a1f.png
[Vue_Element-UI_table]: https://blog.csdn.net/weixin_46713508/article/details/128636896?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167534913116800182732445%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167534913116800182732445&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-25-128636896-null-null.blog_rank_default&utm_term=Vue&spm=1018.2226.3001.4450
[cc1aa570af9045619add3cb52f458295.png]: https://img-blog.csdnimg.cn/cc1aa570af9045619add3cb52f458295.png
[12708f73661a487e9dd53a8099c23da8.png]: https://img-blog.csdnimg.cn/12708f73661a487e9dd53a8099c23da8.png
[618f9b92034a414fb948b9a8d4ab9de0.png]: https://img-blog.csdnimg.cn/618f9b92034a414fb948b9a8d4ab9de0.png